API Adresse

Hello les Goonies,

Ajouter la fonctionnalité d'auto-complétions dans un formulaire est super simple grâce à une API fournie par api.gouv.fr. Je vais te montrer étape par étape comment est-ce que l'on peut s'en servir juste avec un peu de JS. Let's go 🚀

API

Du côté de l'API c'est très simple, il suffit d'interroger cette adresse :

https://api-adresse.data.gouv.fr/search

Pour faire la recherche, il suffira simplement d'ajouter en paramètre d'URL l'adresse que l'utilisateur va rentrer. Dans notre exemple il faudra aussi ajouter deux paramètres :

• type : housenumber, pour la recherche par numéro puisque c'est ce que l'on rentre généralement en premier
• autocomplete : 1, pour activer le traitement d'auto-complétions

Du code

La partie HTML ne contient que trois input de type text, pas la peine de s'y attarder plus que nécessaire (dans les extraits de code, les constantes faisant références aux éléments HTML sont préfixés par$). Partie JS, un event listener sur l'input qui contient l'adresse suffira :

$street.addEventListener("keyup", function (e) {
  e.preventDefault();
  let street = this.value.trim().replace(/\\s/g, "+");
});

Le texte de l'utilisateur sera modifié avant d'être utilisé en remplaçant les espaces par des "+". Ensuite il n'y a plus qu'à faire une requête et fetch() le fait très bien :

async function getAddress(street) {
  const url = "<https://api-adresse.data.gouv.fr/search>";
  const req = await fetch(
    `${url}/?q=${street}&type=housenumber&autocomplete=1`
  );
  const res = await req.json();
}

Ici je me sers de async et await pour conserver un fonctionnement synchrone pour que mes fonctions s'enchainent naturellement.

La réponse sera un objet contenant l'attribut features qui sera un tableau d'objet et l'objet, lui aura un attribut properties qui aura toutes les propriétés nécessaires comme : label, score, housenumber, coord x et y, etc..

Pour afficher les résultats de la requête dans une liste, on va la créer à la volée en hydrant une balise <ul> déjà présente dans la partie HTML :

function displayPossibilities(possibilities) {
   // on vide la liste avant d'ajouter la nouvelle
  $list.replaceChildren();
  possibilities.forEach((possibility) => {
    let { name, label, postcode, city } = possibility.properties;
    let li = document.createElement("li");
    li.classList.add("p-3", "cursor-pointer");
    li.innerText = label;
    $list.appendChild(li);
  });

  if ($list.childElementCount > 0) {
    $possibilities.classList.remove("hidden");
  }
}

Et pour remplir nos champs CP et Ville, il faudra ajouter un event listener sur les <li> lorsqu'on créé la liste.

function displayPossibilities(possibilities) {
	// code
	li.addEventListener("click", () => fillInput(postcode, city, name));
	// code
}

function fillInput(zip, city, label) {
  $zipInput.value = zip;
  $cityInput.value = city;
  $street.value = label;
}

Conclusion

Et voilà ! Maintenant, plus d'excuses pour ne pas ajouter cette petite feature qui ne prend pas longtemps à mettre en place et qui évite bien des erreurs aux utilisateurs mais surtout un gain de temps et un certain confort d'utilisation. La totalité du code est disponible sur Codesandbox à cette adresse :

https://codesandbox.io/s/auto-completion-adresse-jh4jmb?file=/script.js