Saisie semi-automatique avec jQuery UI

Il existe de nombreux plugins sur Internet qui nous permettent d'ajouter cette fonctionnalité à notre site, mais ils sont développés selon un schéma de programmation que nous ne connaissons peut-être pas, puis leur modification et leur mise en œuvre sont généralement quelque peu fastidieuses et compliquées. Mais tout n'est pas perdu depuis jQuery et son extension de bibliothèques Interface utilisateur jQuery ils nous apportent quelques méthodes pour implémenter la fonctionnalité de saisie semi-automatique sur notre site sans trop de maux de tête.
Avant de passer en revue un exemple, voyons la méthode de saisie semi-automatique et son fonctionnement.
La méthode de saisie semi-automatique ()
La méthode Saisie automatique peut être utilisé de deux manières :

$ (sélecteur, contexte) .autocomplete (options) $ (sélecteur, contexte) .autocomplete ("action", paramètres)

Cette méthode déclare qu'un HTML doit être géré comme un champ qui affiche une liste de suggestions, les options précisent le comportement de cette liste au moment où l'utilisateur commence à taper dans le champ.
Parmi les caractères saisis dans le champ de texte, une comparaison est faite avec les valeurs contenues dans les options sources.
Voyons un exemple pratique pour mieux le voir :
1- Nous incluons d'abord les fichiers nécessaires :

2- On crée une variable qui contient les mots qui seront la liste des suggestions disponibles pour l'autocomplétion, la liste des suggestions peut aussi être alimentée à partir d'un JSON et même d'un XML, étendant même un peu la fonctionnalité en ajoutant ajax, mais dans cet exemple nous utiliserons une variable pour ne pas compliquer les choses :

var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C ++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy "," Haskell "," Java "," Javascript "," Lisp "," Perl "," PHP "," Python "," Ruby "," Scala "," Scheme "];

3- On invoque la méthode, on lui associe le sélecteur et on lui donne le paramètre en option la source Vous indiquant où obtenir la liste des suggestions :

 $ ("#tags") .autocomplete ({source : availableTags}); 

4- Pour finir dans notre HTML nous créons unqui contiendra notre entrée qui sera celle qui implémentera la saisie semi-automatique :

Mots clés:

Après l'implémentation, cela devrait être quelque chose comme ceci:

Enfin, je vais vous laisser le code complet afin que vous puissiez le tester par vous-même, sans oublier que nous pouvons remplir notre liste de suggestions provenant de diverses sources valides et en appliquant différentes options et événements qui augmenteront les fonctionnalités de notre composant.

 jQuery UI Autocomplete - Fonctionnalité par défautMots clés:

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif