jQuery

Alors que j'étais en train de coder un système de suggestions pour un champ de recherche (comme Google ou Wikipédia), il m'est apparu un problème de taille. La plupart des navigateurs modernes retiennent les informations entrées dans les champs des formulaires, et les proposent lorsque l'internaute y tape du texte. Or ce comportement (bien que pratique à la base) entrait en contradiction avec ma liste de suggestions fournies par mon système en Ajax, l'internaute se retrouvant avec 2 listes de suggestions qui se chevauchent. J'ai donc rapidement cherché une solution à ce problème, j'en ai trouvé 3 au final.

  • Rajouter un champs autocomplete="off" dans mon champs de recherche : c'est pas valide xHTML.
  • Rajouter ce même champs mais via JavaScript. cela présente plusieurs avantages avec notamment cette fois ci la validité de l'opération (bon d'accord le fait de passer par du JavaScript est un poil de la triche mais quand on veut un document valide on hésite pas). d'autre par si l'internaute vient sur mon site avec je JS désactivé, les suggestions par Ajax seront désactivées mais aussi la désactivation de l'autocomplétion du navigateur, donc il y aura au final une liste de suggestions (s'il a déjà entré du texte auparavant).

Il faut alors utiliser un petit script JS pour ajouter ce champs dans le formulaire : il y a la méthode avec du JS natif détaillé dans cet article (en). Le problème c'est que ça ne marche pas avec tous les navigateurs (sinon ce serait facile de programmer en JS). On peut alors passer par un framework JS tel que JQuery. Non seulement cela assure un compatibilité avec presque tous les navigateurs, mais en plus cela facilite grandement le codage car ça revient à écrire une petite ligne de code :

//désactivation de l'autocomplétion des navigateurs
$(".disableAutoComplete").attr("autocomplete","off");

y'a pas à dire avec JQuery le développement est beaucoup plus rapide.