javascript/html autocompletar el cuadro de texto

Question

Estoy desarrollando una página web que requiere muchos autocompletar cuadros de texto. Como soy nuevo en JavaScript, es muy difícil para mí crear mi propio cuadro de texto de autocompletar. Así que he buscado muchos ejemplos de Internet, pero solo funcionan para un solo cuadro de texto. Esto significa que no puedo usar el mismo archivo js para hacer otro cuadro de texto de autocompletar. No encontré ningún ejemplo así en stackoverflow tampoco. ¿Alguien puede ayudarme en esto?

Answer 1

Use JQuery con el complemento AutoSuggest.

http://docs.jquery.com/Plugins/autocomplete

Incluir las bibliotecas JS (consulte la documentación anterior), y luego hacer esto en HTML:

<input type="text" class="autocomplete" name="n1" /> 
<input type="text" class="autocomplete" name="n2" /> 
<input type="text" class="autocomplete" name="n3" /> 
<input type="text" class="autocomplete" name="n4" /> 

A continuación, añadir un autocompletar a la clase CSS en su Javascript:

var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" "); 
$(".autocomplete").autocomplete(data); 

Answer 2

Si eres nuevo en el desarrollo web, te recomiendo que uses jquery y jqueryUI package. El enlace de arriba es a la página de demostración donde puedes jugar con diferentes tipos de fuentes de datos. He copiado un ejemplo que utiliza matriz simple como una fuente de datos

<script> 
    $(function() { 
     var availableTags = [ 
      "ActionScript",   "AppleScript", 
      "Asp",    "BASIC", 
      "C",    "C++", 
      "Clojure",    "COBOL", 
      "ColdFusion",   "Erlang", 
      "Fortran",    "Groovy", 
      "Haskell",    "Java", 
      "JavaScript",   "Lisp", 
      "Perl",    "PHP", 
      "Python",    "Ruby", 
      "Scala",    "Scheme" 
     ]; 
     $(".tags").autocomplete({ 
      source: availableTags 
     }); 
    }); 
    </script> 

<div><input class="tags" type="text" /></div> 
<div><input class="tags" type="text" /></div> 

Answer 3

El plugin AutoSuggest ha quedado obsoleto y ahora está incluido en jQuery interfaz de usuario.

mira esto:
http://jqueryui.com/demos/autocomplete/

Answer 4

recomiendo para comprobar esto:

http://complete-ly.appspot.com/

El simple caso debe satisfacer sus requisitos:

var cly = completely(document.getElementById('a-div-wrapping-your-autocomplete-box'); 
cly.options = [ 'your','array','of','options','(possibly sorted somehow)']; 

Answer 5

Aquí es un método fácil , solo usa el evento onkeyup:

<input type="text" id="a" onkeyup="myFunction()"> 
<br/> 
<br/> 


<script type="text/javascript"> 
function myFunction() { 

    var x = document.getElementById("a").value; 

    document.getElementById("abc").innerHTML = x; 
} 
</script> 

Answer 6

Aquí es una solución para crear autocompletar con JQUERY No o No JavaScript .. html5 simplemente un cuadro de entrada y una etiqueta de lista de datos ..

<input type="text" id="txtAutoComplete" list="languageList"/><!--your input textbox--> 
<datalist id="languageList"> 
<option value="HTML" /> 
<option value="CSS" /> 
<option value="JavaScript" /> 
<option value="SQL" /> 
<option value="PHP" /> 
<option value="jQuery" /> 
<option value="Bootstrap" /> 
<option value="Angular" /> 
<option value="ASP.NET" /> 
<option value="XML" /> 
</datalist> 

magra más sobre él here