Autocomplete : définition, typeahead et bonnes pratiques

Autocomplete : la définition en clair

Le principe tient en une ligne : deviner ce que l'utilisateur veut écrire et le lui proposer avant qu'il ait fini. En français, on dit saisie semi-automatique, ou autocomplétion. Quelques lettres tapées, et le système suggère la suite.

Vous vous en servez tous les jours sans y penser. Sur Google, des suggestions apparaissent sous la barre dès que vous commencez une recherche. Sur un site marchand, votre navigateur remplit nom, adresse et téléphone en un clic. Dans les deux cas, c'est de l'autocomplete. Mais la mécanique n'a rien à voir.

Autocomplete et typeahead : quelle différence ?

Quand on parle d'autocomplete, on pense souvent au remplissage automatique des champs d'un formulaire. Ce travail-là, c'est le navigateur qui le fait, avec les données que l'internaute a déjà enregistrées. Le site, lui, se contente d'indiquer par un attribut HTML ce que chaque champ attend.

Le typeahead est un composant d'interface. Sa liste de suggestions se met à jour à chaque lettre. Et cette fois, les propositions viennent du site lui-même : catalogue produits, liste de villes, base clients. Vous le croiserez aussi sous les noms de combobox ou de champ à suggestions.

• Remplissage automatique : géré par le navigateur, il reprend les données déjà connues de l'internaute.
• Typeahead : géré par le site, il propose des résultats tirés de vos propres données.
• Suggestions de recherche Google : une forme de typeahead à très grande échelle, nourrie par les recherches des internautes.

À quoi sert l'autocomplete sur un site qui doit rapporter

Si vous dirigez une PME, l'enjeu est limpide. Chaque champ à remplir dresse une petite barrière entre votre visiteur et sa demande de devis (ou sa commande). Moins il tape, plus il va au bout. L'autocomplete lui épargne une bonne partie de cette frappe.

Sur mobile, c'est encore plus flagrant. Qui aime saisir une adresse complète au pouce, sur un clavier minuscule, en corrigeant une faute sur deux ? Une touche, et le remplissage automatique règle l'affaire. Votre taux de conversion en profite directement, surtout sur les formulaires longs.

Les bénéfices concrets

• Moins d'abandons dans le tunnel de commande : le visiteur remplit ses coordonnées en quelques secondes.
• Moins d'erreurs de saisie, et une adresse de livraison mal tapée, c'est un colis renvoyé.
• Une recherche interne plus efficace, puisque le typeahead oriente vers les produits qui existent vraiment.
• Des données plus propres dans votre CRM, les valeurs étant choisies dans une liste plutôt que tapées à la main.

Comment fonctionne l'attribut autocomplete en HTML

Côté code, tout passe par l'attribut autocomplete, posé sur une balise input ou sur le formulaire entier. Il dit au navigateur quelle donnée est attendue. À lui ensuite de faire le lien avec ce qu'il a en mémoire. Un champ mal décrit, et il ne propose rien, ou pire, il glisse la mauvaise information au mauvais endroit.

Les valeurs les plus utiles

La spécification HTML fixe une liste précise de valeurs. Inutile de toutes les apprendre. Une dizaine suffit pour la plupart des sites de PME, et voici celles que nous posons sur presque tous nos formulaires.

• name, given-name et family-name pour le nom complet, le prénom et le nom.
• email et tel pour l'adresse électronique et le numéro de téléphone.
• street-address, postal-code et address-level2 pour l'adresse, le code postal et la ville.
• organization pour le nom de l'entreprise, utile en B2B.
• cc-number et cc-exp pour les champs de carte bancaire.
• current-password et new-password pour distinguer connexion et création de compte.
• one-time-code pour le code reçu par SMS, que les téléphones peuvent alors proposer tout seuls.

Pensez aussi au préfixe de section. Avec shipping et billing, vous séparez l'adresse de livraison de celle de facturation dans un même formulaire, et le navigateur sait quelle adresse mettre où.

Le cas de autocomplete off

Off demande au navigateur de ne rien suggérer. Utile sur quelques champs précis : un code de vérification, un champ de recherche qui a déjà son propre typeahead. Sur un nom ou une adresse, en revanche, aucun intérêt.

Méfiez-vous, d'ailleurs. Sur les champs d'identifiant et de mot de passe, les navigateurs récents ignorent souvent cette valeur, et c'est voulu : ils veulent pousser l'usage des gestionnaires de mots de passe. Je vous le dis franchement, ne comptez pas sur off pour verrouiller quoi que ce soit côté sécurité.

Le typeahead côté développement : React, MUI, Angular, Symfony

Un champ à suggestions, c'est autrement plus de travail qu'un attribut. Écouter la frappe, interroger une source de données, afficher les résultats, gérer le clavier : tout doit suivre. Voilà pourquoi la plupart des équipes partent d'un composant UI déjà éprouvé au lieu de tout réécrire.

Les composants les plus répandus

Chaque écosystème a sa réponse. En React, la bibliothèque MUI fournit un composant Autocomplete très complet, avec sélection multiple et chargement asynchrone. Angular Material propose mat-autocomplete ; PrimeNG a aussi le sien pour Angular. Et en PHP, Symfony UX Autocomplete transforme un champ de formulaire en liste de suggestions sans une ligne de JavaScript écrite à la main.

En JavaScript pur, la logique ne change pas. D'abord, attendre que l'utilisateur ait tapé deux ou trois caractères. Ensuite, patienter quelques centaines de millisecondes après la dernière frappe, pour éviter une requête à chaque lettre. Enfin, interroger une API qui renvoie les meilleurs résultats.

L'accessibilité : un point à ne pas négliger

Clavier et lecteur d'écran doivent suffire pour utiliser le champ. Concrètement : les flèches parcourent la liste, Entrée valide, Échap ferme. Quant aux attributs ARIA (le rôle combobox, aria-expanded), ils annoncent ce qui se passe à l'écran aux personnes qui ne le voient pas.

Pour les formulaires, le référentiel français RGAA va plus loin. Son critère 11.13 exige que la finalité d'un champ puisse être déduite, afin de faciliter le remplissage automatique. Autrement dit, des valeurs autocomplete correctes sur les données personnelles relèvent de la conformité. Pas seulement du confort.

L'autocomplete dans VS Code et le terminal

Chez les développeurs, le mot revient avec un sens voisin. Dans Visual Studio Code, l'autocomplétion propose noms de variables, de fonctions et de balises pendant que vous codez. Son nom : IntelliSense. Gain de temps, et beaucoup de fautes de frappe en moins.

HTML, JavaScript et JSX dans VS Code

Pour le HTML, VS Code s'appuie sur Emmet, qui déploie une abréviation en balises complètes. Côté JavaScript, les suggestions viennent du moteur TypeScript intégré, même si vous n'écrivez pas une ligne de TypeScript. Un fichier jsconfig.json à la racine du projet ? Il l'aide à comprendre vos imports, et les propositions s'améliorent nettement.

Le JSX dans des fichiers .js coince souvent. Par défaut, Emmet ne s'y active pas. Ajoutez le réglage emmet.includeLanguages en associant javascript à javascriptreact, et l'expansion des balises revient.

Quand les suggestions ne s'affichent plus

Plus rien ne s'affiche ? Regardez d'abord le mode de langage, en bas à droite de la fenêtre : un fichier pris pour du texte brut ne reçoit aucune suggestion. Contrôlez ensuite editor.quickSuggestions. Puis désactivez une à une les extensions récentes, car deux extensions peuvent se marcher dessus. En attendant, Ctrl + Espace force l'affichage.

Le terminal a lui aussi son autocomplétion. Sous zsh ou avec des outils comme kubectl, des scripts de complétion proposent commandes et options d'un appui sur Tab. Même principe, version ligne de commande.

Les erreurs courantes sur un formulaire

Sur les sites que nous reprenons, ce sont presque toujours les mêmes défauts. Simples à corriger. Pourtant, ils coûtent des demandes de contact tous les mois. Voici ceux qui reviennent le plus souvent.

• Mettre autocomplete off sur tout le formulaire par réflexe, ce qui prive le visiteur du remplissage automatique.
• Oublier les valeurs sur les champs d'adresse, ou confondre adresse de livraison et adresse de facturation.
• Choisir des noms de champs fantaisistes que le navigateur ne sait pas interpréter.
• Lancer une requête serveur à chaque lettre, ce qui ralentit le site et charge l'hébergement.
• N'afficher rien quand il n'y a aucun résultat, au lieu d'un message clair qui propose une autre piste.
• Construire un typeahead inutilisable au clavier ou sur écran tactile.
• Découper un formulaire en étapes sans garder les données déjà saisies, piège classique d'un formulaire multi étapes.

Nous vérifions ces réglages systématiquement lors d'une création de site internet. Invisibles sur une maquette, ils pèsent pourtant au moment précis où le visiteur choisit entre remplir et partir.

Questions fréquentes