Search the value of an input in Duckduckgo / Google using javascript

Navigation
1

I want a way to open a search through Duckduckgo using the text entered in a text input (# search-bar), so that when you click on the Enter key the written text is the value of the search. I want to do it without using libraries like jQuery . This is my HTML code 

    <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>

And this is my 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");
        }
    }

}

My problem is that the function does not run correctly if I use the Enter key.

    
asked by akko 27.06.2016 в 05:52
source

1 answer

1

What you are looking for is something like this.

Have direct tests from your server or localhost, maybe from the snippet do not do the correct function of 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..." />
    
answered by 27.06.2016 в 18:50
Fill table with the data of a serialized file Errors map with leaflet and google