Plugin autocomplete simple pour jQuery

En temps normal, quand j'ai à intégrer un champ autocomplete, j'utilise le composant autocomplete de YUI qui est parfaitement configurable. Cette fois-ci, ayant remarqué que jQuery était dans le projet, je me suis dit qu'il serait avantageux de chercher un plugin jQuery qui allégerait le chargement plutôt que d'intégrer les multiples scripts nécessaires à YUI.

J'en ai trouvé un dans jQuery UI mais comme je ne souhaitais pas un thème particulier, j'ai trouvé ce plugin autocomplete simplifié créé par Jörn Zaefferer. Bien sûr, la version 1.1 possède beaucoup moins d'options et de flexibilité que ce qu'offre les autres, mais j'ai jugé bon de le mettre au banc d'essai. Parfois la simplicité est suffisante pour faire le travail. Et ça a été le cas ici pour une intégration éclair.

D'abord, il faut télécharger jquery.autocomplete.zip et le décompresser. À l'intérieur se trouve plusieurs fichiers mais je n'ai besoin que de ceux-ci :

• jquery.autocomplete.min.js
• jquery.autocomplete.css
• indicator.gif
  

La version minifiée (.min.js) est un peu plus lourde que celle compressée .pack.js mais je préfère la première car elle n'utilise pas eval(). Liez d'abord le framework jQuery, le plugin et la feuille de style :

<script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="/js/jquery-autocomplete/jquery.autocomplete.min.js"></script>
<link rel="stylesheet" type="text/css" href="/js/jquery-autocomplete/jquery.autocomplete.css" />

Il semble y avoir une petite erreur dans la feuille de style car indicator.gif ne se trouve pas à la racine mais plutôt dans le répertoire demo. Vous pouvez soit copier l'image à la racine (ce que j'ai fait), soit changer l'URL de la classe CSS pour ceci si vous souhaitez déposer le répertoire demo en ligne :

.ac_loading {
   background: white url('demo/indicator.gif') right center no-repeat;
}

Créez une page dynamique (exemple: get-data-autocomplete.php) qui fournira la source de données. Ici, ça peut provenir de n'importe où tant que chaque ligne en sortie correspond à un enregistrement (j'aurais préféré une source JSON). Par exemple, chaque ligne devra prendre la forme étiquette|valeur :

Marc|1
Marc-André|2
Martin|3
Martine|4
Mathieu|5
Matthieu|6
Mathias|7
Mathis|8

Dans le fichier principal, ajoutez le champ de formulaire HTML qui servira de point d'entrée au champ d'auto-complétion. À l'affichage, la largeur du champ définira la largeur du panneau de suggestions.

<input id="ac_field" name="ac_field" value="" type="text">
<input id="ac_value" name="ac_value" value="" type="hidden">

Et enfin le JavaScript :

$j = jQuery.noConflict();

$j(document).ready(function(){
   $j('#ac_field').autocomplete(
       '/ajax/get-data-autocomplete.php',
       {
           'minChars': 1,
           'max': 10,
           'mustMatch': true
       }
   ).result(
       function(e, i){
           if(i != undefined){
               $j('#ac_value').val(i[1]);
           }
           else{
               $j('#ac_value').val('');
           }
       }
   ).blur(
       function(){
           $j('#ac_value').val();
           // réinitialiser le formulaire si nécessaire
           // avec des valeurs par défaut
       }
   );
});

Le plugin effectue automatiquement la requête Ajax avec la méthode GET et envoie au fichier PHP des paramètres utiles qui sont automatiquement nommés q et limit.

$_GET['q'] // pour filtrer la source de données
$_GET['limit'] // pour limiter le nombre de résultats retournés

Ainsi, vous pouvez adapter votre requête SQL pour filtrer les résultats d'une table.

Comme je voulais forcer l'utilisateur à faire un choix dans la liste de suggestions et ne pas accepter de nouvelles entrées, j'ai trouvé une suggestion sur Stack Overflow où quelqu'un proposait d'enchaîner les fonctions result() et blur() pour contrôler la manipulation.

Il suffira ensuite de valider côté serveur que le champ ac_value (hidden) n'est pas vide et d'afficher un message d'erreur si c'est le cas.