Ajouter l'autocomplétion d'adresse à un formulaire web

Pourquoi autocompléter l'adresse

Une adresse tapée à la main est le point de départ de la plupart des erreurs de livraison : une boîte oubliée, une rue écrite de deux façons, le code postal de la ville voisine. Proposer des adresses officielles pendant la saisie supprime l'erreur avant qu'elle soit enregistrée.

Le formulaire raccourcit aussi : un champ au lieu de cinq, rempli en quelques frappes.

Quand envoyer la recherche

• Attendez deux ou trois caractères : une saisie plus courte correspond à trop de résultats pour aider.
• Attendez environ 200 millisecondes après la dernière frappe, pour qu'une personne qui tape vite envoie une recherche et non dix.
• Annulez la requête précédente quand une nouvelle part, pour qu'une ancienne réponse n'écrase jamais une plus récente.
• Affichez cinq à huit suggestions au maximum.

Que faire de la suggestion choisie

Remplissez les champs structurés (rue, numéro, boîte, code postal, localité) à partir de la suggestion, pas du texte tapé, et laissez-les modifiables.

Enregistrez les coordonnées et l'identifiant officiel avec l'adresse : ils permettent plus tard de comparer deux adresses sans comparer des orthographes.

Quand le bâtiment a des boîtes et que la suggestion n'en porte pas, demandez la boîte dans un champ à part plutôt que de la laisser taper après la rue.

Clavier et lecteurs d'écran

• Les flèches parcourent les suggestions, Entrée en choisit une, Échap ferme la liste.
• Suivez le modèle ARIA combobox : le champ a le rôle combobox, la liste le rôle listbox, et aria-activedescendant suit la suggestion en surbrillance.
• Annoncez le nombre de suggestions dans une zone live.
• Ne bloquez jamais la saisie libre : un bâtiment tout neuf peut ne pas encore figurer dans le référentiel.

Gardez la clé API sur votre serveur

La clé qui authentifie l'API ne doit jamais arriver dans le navigateur, où n'importe qui peut la lire. Envoyez la recherche à votre propre backend, qui ajoute la clé et transmet l'appel.

Ce même backend peut mettre en cache les débuts de recherche les plus fréquents et appliquer vos propres limites par visiteur.

Une facturation qui suit la frappe

Beaucoup de services d'adresses facturent chaque appel ou chaque adresse choisie. Addrly facture son autocomplétion par session de frappe : les frappes d'une même recherche comptent pour une requête, et l'attente décrite plus haut économise de la latence plutôt que de l'argent.

Questions fréquentes