Add company autocomplete to a form

Step 1: call the route

The route takes the typed text (q), one or more countries (country) and a maximum number of suggestions (limit, 1 to 20, 8 by default). Only active companies are suggested, unless you add status=any. A typed number (SIREN, SIRET or a foreign equivalent) returns its company directly.

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

Step 2: relay the call from your server

Never call the API from the browser: the key would be visible there. Your server exposes a small address that relays the input:

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

Step 3: display the suggestions

In the page, wait for a short typing pause (250 ms) before querying, ignore fewer than 2 characters (otherwise the route returns 400 query_too_short) and keep the chosen company identifier in a hidden field:

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

Step 4: validate on submit

Before saving the record, a call to GET /v2/validate?id=FR-552032534 confirms the format, the existence and the active status of the company. The response is always 200; the valid field says whether all checks passed. For more, see How to check that a SIRET number is valid.

Good practice: let the user type a name freely if no suggestion fits, show the city to tell namesakes apart, and treat an API error as an empty list rather than blocking the form.

Keep reading

• SIRENWhat is a SIREN number and how to find itThe 9-digit format, who gets one, where it appears and how to find a company's SIREN from its name.
• SIRETHow to check a French SIRET numberThe 14-digit format, spotting typing mistakes and the difference between a valid SIRET and an active establishment.
• COMPAREHow to choose a company data API: 8 criteriaCoverage, validation, up-to-date data, SLA, pricing, documentation, GDPR and monitoring: the grid to compare.