Mots-clés et autocomplétion

Voici une dernière implémentation javascript, pour faciliter à la fois l'administration du site et l'utilisation du formulaire de recherche. Ou comment simplifier la saisie des mots-clés avec un script d'glo.autocomplétion.

Ce script, décrit en détail dans un article écrit par Denis Cabasson (voir lien ci-dessous), interroge une liste de mots via une requête XMLHttpRequest pour fournir des suggestions de complétion. Je l'ai pas mal modifié pour :

  • Gérer l'ensemble de la présentation de l'autocomplétion avec un fichier CSS au lieu d'insérer des règles de styles via javascript.
  • Simplifier cette présentation et surtout le code de la liste de suggestion, encombré de div et de span imbriqués alors qu'une simple liste à puce (ul/li) suffit.
  • Réécrire certaines fonctions javascript qui faisaient double emploi avec celles déjà utilisées sur le site.

L'avantage de la version originale, c'est une utilisation immédiate : vous n'avez rien à ajouter, simplement préciser les identifiants du formulaire et du champ à compléter ainsi que la page web (un fichier xml) qui fournira la liste des mots. L'article décrit très clairement les étapes de mise en place du script.

Je pensais utiliser l'autocomplétion uniquement pour insérer plus facilement les mots-clés lors de l'écriture des brèves et des articles, mais elle peut aussi servir sur le champ de recherche placé en haut de chaque page du site. Pour qu'elle fonctionne avec Internet Explorer, il faudra cependant que je replace une partie du code original que j'ai supprimé, celui qui adaptait les actions du script en fonction des navigateurs. Par ailleurs, la fonction ne prend évidemment pas en compte les recherches multicritères « et » (mot1+mot2) et « ou » (mot1|mot2).

Enfin, j'ai repris le système de mise en cache des réponses de l'objet XMLHttpRequest présent dans le script, ce qui évite de relancer une requête quand celle-ci a déjà été effectuée, pour l'adapter à la fonction qui gère les liens du glossaire.

Comme toujours, si la gestion du javascript est désactivé dans votre navigateur ou si celui-ci ne comprend pas l'objet XMLHttpRequest, le champ de recherche se comportera comme n'importe quel champ de formulaire.

Ressources et références :

Titre
Ajax - une autocomplétion pas à pas
Auteurs
  • D. CABASSON
Editeur
Developpez.com
Date
Remarque
Le script qui a servi de base.
Titre
Make Life Easy With Autocomplete Textboxes
Auteurs
  • N. ZAKAS
Editeur
Sitepoint
Date
Remarque
Description d'un script javascript, sans objet XMLHttpRequest, qui permet de construire une autocomplétion simple mais efficace dans un champ de formulaire. Une démonstration est disponible sur le site de Simon Willison.