Unternehmens-Autocomplete in ein Formular einbauen

Schritt 1: die Route aufrufen

Die Route nimmt den eingegebenen Text (q), ein oder mehrere Länder (country) und eine maximale Zahl an Vorschlägen (limit, 1 bis 20, standardmäßig 8). Es werden nur aktive Unternehmen vorgeschlagen, außer Sie fügen status=any hinzu. Eine eingegebene Nummer (SIREN, SIRET oder ausländisches Äquivalent) liefert direkt ihr Unternehmen.

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

Schritt 2: den Aufruf über Ihren Server weiterleiten

Rufen Sie die API nie aus dem Browser auf: Der Schlüssel wäre dort sichtbar. Ihr Server stellt eine kleine Adresse bereit, die die Eingabe weiterleitet:

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

Schritt 3: die Vorschläge anzeigen

Warten Sie auf der Seite eine kurze Tipppause (250 ms), bevor Sie abfragen, ignorieren Sie weniger als 2 Zeichen (sonst liefert die Route 400 query_too_short) und speichern Sie die Kennung des gewählten Unternehmens in einem versteckten Feld:

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

Schritt 4: beim Absenden validieren

Bevor Sie den Datensatz speichern, bestätigt ein Aufruf von GET /v2/validate?id=FR-552032534 Format, Existenz und aktiven Status des Unternehmens. Die Antwort ist immer 200; das Feld valid zeigt, ob alle Prüfungen bestanden wurden. Mehr dazu in So prüfen Sie, ob eine SIRET-Nummer gültig ist.

Gute Praxis: Lassen Sie den Nutzer einen Namen frei eingeben, wenn kein Vorschlag passt, zeigen Sie den Ort, um Namensvettern zu unterscheiden, und behandeln Sie einen API-Fehler als leere Liste, statt das Formular zu blockieren.

Weiterlesen

• SIRENWas ist eine SIREN-Nummer und wie finden Sie sieDas 9-stellige Format, wer eine erhält, wo sie steht und wie Sie die SIREN eines Unternehmens über den Namen finden.
• SIRETEine französische SIRET-Nummer prüfenDas 14-stellige Format, das Erkennen von Tippfehlern und der Unterschied zwischen einer gültigen SIRET und einer aktiven Niederlassung.
• VERGLEICHEine API für Unternehmensdaten auswählen: 8 KriterienAbdeckung, Validierung, aktuelle Daten, SLA, Preise, Dokumentation, DSGVO und Überwachung: das Raster für den Vergleich.