javascript/html autocomplete zone de texte

Question

Je suis en train de développer une page web qui a besoin de beaucoup de zones de saisie semi-automatique. Comme je suis novice en javascript, il m'est très difficile de créer ma propre boîte de texte. J'ai donc cherché de nombreux exemples sur Internet, mais ils ne fonctionnent que pour une seule zone de texte. Cela signifie que je ne peux pas utiliser le même fichier js pour créer une autre zone de saisie semi-automatique. Je n'ai pas trouvé de tels exemples sur stackoverflow non plus. Quelqu'un peut-il m'aider dans ce domaine?

Answer 1

Utilisez JQuery avec le plug-in AutoSuggest.

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

Inclure les bibliothèques JS (voir la documentation ci-dessus), faites ceci 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" /> 

Ensuite, ajoutez une saisie semi-automatique à la classe CSS dans votre Javascript:

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

Answer 2

Si vous débutez dans le développement web, je vous recommande d'utiliser jquery et jqueryUI package. Le lien ci-dessus est à la page de démonstration où vous pouvez jouer avec différents types de sources de données. J'ai copié un exemple qui utilise simple tableau comme source de données

<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

Le plugin AutoSuggest a été dépréciée et est maintenant inclus dans jQuery UI.

Check this out:
http://jqueryui.com/demos/autocomplete/

Answer 4

Je recommande de vérifier:

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

Le cas simple devrait répondre à vos besoins:

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

Answer 5

Voici une méthode facile , utilisez simplement l'événement 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

est ici une solution pour créer autocomplete avec Pas JQUERY ou Non JAVASCRIPT .. html5 tout simplement une boîte d'entrée et une étiquette datalist ..

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

maigre plus sur ce here