Je recommanderais de jeter un œil au widget de saisie semi-automatique de jQuery UI. Ils ont traité la plupart des cas là-bas, car leur base de code est plus mature que la plupart des autres.
Vous trouverez ci-dessous un lien vers une page de démonstration afin que vous puissiez vérifier que cela fonctionne. http://jqueryui.com/demos/autocomplete/#default
Vous obtiendrez le plus d'avantages en lisant la source et en voyant comment ils l'ont résolu. Vous pouvez le trouver ici: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js .
Fondamentalement, ils font tout, ils se lient à input, keydown, keyup, keypress, focus and blur
. Ensuite, ils ont un traitement spécial pour toutes sortes de clés comme page up, page down, up arrow key and down arrow key
. Une minuterie est utilisée avant d'obtenir le contenu de la zone de texte. Lorsqu'un utilisateur tape une clé qui ne correspond pas à une commande (touche haut, touche bas, etc.), un temporisateur explore le contenu après environ 300 millisecondes. Cela ressemble à ceci dans le code:
// switch statement in the
switch( event.keyCode ) {
//...
case keyCode.ENTER:
case keyCode.NUMPAD_ENTER:
// when menu is open and has focus
if ( this.menu.active ) {
// #6055 - Opera still allows the keypress to occur
// which causes forms to submit
suppressKeyPress = true;
event.preventDefault();
this.menu.select( event );
}
break;
default:
suppressKeyPressRepeat = true;
// search timeout should be triggered before the input value is changed
this._searchTimeout( event );
break;
}
// ...
// ...
_searchTimeout: function( event ) {
clearTimeout( this.searching );
this.searching = this._delay(function() { // * essentially a warpper for a setTimeout call *
// only search if the value has changed
if ( this.term !== this._value() ) { // * _value is a wrapper to get the value *
this.selectedItem = null;
this.search( null, event );
}
}, this.options.delay );
},
La raison d'utiliser un minuteur est pour que l'interface utilisateur ait une chance d'être mise à jour. Lorsque Javascript est en cours d'exécution, l'interface utilisateur ne peut pas être mise à jour, donc l'appel à la fonction de retard. Cela fonctionne bien pour d'autres situations telles que garder le focus sur la zone de texte (utilisée par ce code).
Vous pouvez donc utiliser le widget ou copier le code dans votre propre widget si vous n'utilisez pas jQuery UI (ou dans mon cas, développer un widget personnalisé).