Ajouter l'autocomplétion d'entreprise à un formulaire

Étape 1 : appeler la route

La route prend le texte saisi (q), un ou plusieurs pays (country) et un nombre maximal de suggestions (limit, de 1 à 20, 8 par défaut). Seules les entreprises actives sont proposées, sauf si vous ajoutez status=any. Un numéro saisi (SIREN, SIRET ou équivalent étranger) renvoie directement son entreprise.

curl "https://api.jsonpage.com/v2/autocomplete?q=danone&country=FR&limit=5" \
  -H "X-API-Key: $JSONPAGE_API_KEY"

{
  "data": [
    { "id": "FR-552032534", "name": "DANONE", "status": "active",
      "postal_code": "…", "city": "…", "kind": "company" }
  ]
}

Étape 2 : relayer l'appel depuis votre serveur

N'appelez jamais l'API depuis le navigateur : la clé y serait visible. Votre serveur expose une petite adresse qui relaie la saisie :

async function suggestions(q) {
  const url = new URL("https://api.jsonpage.com/v2/autocomplete");
  url.searchParams.set("q", q);
  url.searchParams.set("country", "FR");
  url.searchParams.set("limit", "6");
  const res = await fetch(url, { headers: { "X-API-Key": API_KEY } });
  if (!res.ok) return [];
  return (await res.json()).data;
}

Étape 3 : afficher les suggestions

Dans la page, attendez une courte pause de frappe (250 ms) avant d'interroger, ignorez moins de 2 caractères (la route renvoie sinon 400 query_too_short) et conservez l'identifiant de l'entreprise choisie dans un champ caché :

const input = document.querySelector("#company");
const idField = document.querySelector("#company-id");
let timer;

input.addEventListener("input", () => {
  clearTimeout(timer);
  const q = input.value.trim();
  if (q.length < 2) return;
  timer = setTimeout(async () => {
    const res = await fetch("/company-suggestions?q=" + encodeURIComponent(q));
    const list = await res.json();
    showList(list.map(c => ({
      label: c.name + " · " + c.postal_code + " " + c.city,
      pick: () => { input.value = c.name; idField.value = c.id; }
    })));
  }, 250);
});

Étape 4 : valider à l'envoi

Avant d'enregistrer la fiche, un appel à GET /v2/validate?id=FR-552032534 confirme le format, l'existence et le statut actif de l'entreprise. La réponse est toujours 200 ; le champ valid indique si tous les contrôles sont réussis. Pour le détail, voir Comment vérifier qu'un numéro SIRET est valide.

Bonnes pratiques : laissez l'utilisateur saisir un nom librement si aucune suggestion ne convient, affichez la ville pour distinguer les homonymes, et traitez une erreur de l'API comme une liste vide plutôt que de bloquer le formulaire.

Pour aller plus loin

• SIRENNuméro SIREN : à quoi il sert et comment le trouverLe format à 9 chiffres, qui en reçoit un, où il apparaît et comment trouver celui d'une entreprise à partir de son nom.
• SIRETComment vérifier qu'un numéro SIRET est valideLe format à 14 chiffres, la détection des fautes de frappe et la différence entre SIRET valide et établissement actif.
• COMPARERChoisir une API de données d'entreprises : 8 critèresCouverture, validation, données à jour, SLA, prix, documentation, RGPD et surveillance : la grille pour comparer.