Bedrijfs-autocomplete aan een formulier toevoegen

Stap 1: de route aanroepen

De route neemt de ingetypte tekst (q), een of meer landen (country) en een maximumaantal suggesties (limit, van 1 tot 20, standaard 8). Alleen actieve bedrijven worden voorgesteld, tenzij u status=any toevoegt. Een ingetypt nummer (SIREN, SIRET of een buitenlands equivalent) geeft meteen zijn bedrijf terug.

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" }
  ]
}

Stap 2: de aanroep doorsturen via uw server

Roep de API nooit aan vanuit de browser: de sleutel zou daar zichtbaar zijn. Uw server biedt een klein adres aan dat de invoer doorstuurt:

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;
}

Stap 3: de suggesties tonen

Wacht op de pagina een korte typpauze (250 ms) voor u opvraagt, negeer minder dan 2 tekens (anders geeft de route 400 query_too_short) en bewaar de identificatie van het gekozen bedrijf in een verborgen veld:

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);
});

Stap 4: valideren bij verzenden

Voordat u het dossier opslaat, bevestigt een aanroep van GET /v2/validate?id=FR-552032534 het formaat, het bestaan en de actieve status van het bedrijf. Het antwoord is altijd 200; het veld valid zegt of alle controles slaagden. Meer daarover leest u in Hoe controleert u of een SIRET-nummer geldig is.

Goede praktijk: laat de gebruiker vrij een naam typen als geen suggestie past, toon de plaats om naamgenoten te onderscheiden en behandel een API-fout als een lege lijst in plaats van het formulier te blokkeren.

Verder lezen

• SIRENWat is een SIREN-nummer en hoe vindt u hetHet formaat van 9 cijfers, wie er een krijgt, waar het staat en hoe u het SIREN van een bedrijf op naam vindt.
• SIRETEen Frans SIRET-nummer controlerenHet formaat van 14 cijfers, typefouten opsporen en het verschil tussen een geldig SIRET en een actieve vestiging.
• VERGELIJKENEen API voor bedrijfsgegevens kiezen: 8 criteriaDekking, validatie, actuele gegevens, SLA, prijzen, documentatie, AVG en opvolging: het raster om te vergelijken.