1

Quiero una manera de abrir una búsqueda a través de Duckduckgo usando el texto ingresado en un input de texto (#search-bar), de manera que al hacer click en la tecla Enter el texto escrito sea el valor de la búsqueda. Quiero hacerlo sin utilizar librerías como jQuery. Este es mi código HTML

    <form>
        <input type="text" id="search-bar" placeholder="Buscan">
        <--
           Si utilizo un <textarea></textarea> en lugar de un input, el javascript funciona,
           pero no es lo que necesito.
        -->
    </form>

Y este es mi javascript.

var search_bar = document.getElementById("search-bar");
var search_wrap = document.getElementById("search-wrap");
var search_visible = false;
search_wrap.style.display = 'none';
"use strict";
document.onkeyup = function (e){
    // if S
    if((e.keyCode == 83) && (search_visible == false)){
        search_visible = true;
        search_wrap.style.display = 'block';
        search_bar.focus();
    }
    // if Esc
    else if((e.keyCode == 27) && (search_visible == true)){
        search_visible = false;
        search_wrap.style.display = 'none';
    }.
    // if Enter

    // Si cambio el 13 (Enter) por otra tecla, E.g. 20 (Bloq Mayus) funciona a la perfección.
    // Si cambio el 13 por un 17 (Ctrl) funciona haciendo Ctrl+Enter
    else if((e.keyCode == 13) && (search_visible == true)){
        var content = search_bar.value.replace(new RegExp(" ", 'g'), "+");
        // He intentado con if(content.length > 0)
        if(content != ""){
            window.location = ("https://duckduckgo.com/?q=" + content + "&ia=about");
        }
    }

}

Mi problema es que la función no se ejecuta correctamente si utilizo la tecla Enter.

8
  • window.location es una propiedad de sólo lectura, prueba con window.location.href = "https://duckduckgo.com/?q=" + content;. el 27 jun. 2016 a las 7:05
  • Muchas gracias por contestar, lamentablemente esto no funciona; ya he intentado con assign(), replace() y href(), pero nada parece funcionar correctamente.
    – akko
    el 27 jun. 2016 a las 7:08
  • que navegador estás usando? me funciona de forma correcta en google chrome Version 51.0.2704.103 en OSX el 27 jun. 2016 a las 10:30
  • He hecho un par de cambios para experimentar y aislar el funcionamiento, concretamente en lugar de document.onkeydown he usado search_bar.onkeydown y en luguar de if((e.keyCode == 13) && search_visible == true) lo he dejado para que comprobase solo la pulsación del retorno de carro con if(e.keyCode == 13), entonces ha funcionado correctamente; ¿puede ser que search_visible no llegue a ponerse a true? Si tampoco eso... n'idea :( el 27 jun. 2016 a las 10:33
  • Dentro del if(ALT+S) he incluido otro if(search_visible == true) que agrega una función search_bar.onkeydown, la cual realiza la función del enter. Pero tengo el mismo problema, si no pongo una alerta la búsqueda no se realiza.
    – akko
    el 27 jun. 2016 a las 15:54

1 respuesta 1

1

Lo que tú buscas es algo como esto.

Has pruebas directas desde tu server o localhost, tal vez desde el snippet no haga la función correcta del window.location

document.onkeyup = function (event){ // Evento onkeyup para todo el documento
  var tecla = event.keyCode; //Capturamos la tecla en el documento
  var a = document.getElementById("buscador"); // Buscamos el input llamado, Buscador
  if(tecla == 83){ //Si la tecla es alt+s entonces...
    a && a.focus(); //Comprobamos nuestro input exista y ejecutamos la función focus que hará seleccionarlo.
    a.onkeyup = function (ev){ //Ahora agregamos evento al input con ID buscador, evento que capture cuando tecleen dentro de el.
      var tcl = ev.keyCode; //Capturamos la tecla que han liberado.
      tcl == 13 && this.value.length > 0 ? (window.location = "https://duckduckgo.com/?q="+this.value):false; // si la tecla que han usado es un "enter" y el valor que contiene es mas de 1 carácter, entonces ejecutamos la función para redireccionar a la url que deseamos.
      
    }
  }
  if(tecla == 27){ //Cuando la tecla elegida es: esc, procedemos
     a.value.length > 0 ? (a.value = "") : false; //si el input contiene información, entonces limpiamos el input
      a.blur(); //Quitamos el foco del input.
  }
}
#buscador {
    background: url(search-dark.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: normal 12px Arial,Helvetica,Sans-serif;
    color: #fff;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#buscador:focus {
    width: 200px;
    }
<input id ="buscador" name="q" type="text" size="40" placeholder="Buscar..." />

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.