Adressefelt med autocomplete i din checkout

// Adressefelt med forslag. Debounce, afbryd det forrige kald, og
// udfyld de øvrige felter ud fra det valgte forslag.
const input = document.querySelector('#adresse');
const liste = document.querySelector('#forslag');
const form = input.form;
let inflight;
let timer;

input.addEventListener('input', () => {
  clearTimeout(timer);
  timer = setTimeout(async () => {
    const q = input.value.trim();
    if (q.length < 2) return (liste.innerHTML = '');

    // Afbryd det forrige kald, så et langsomt svar ikke overskriver et nyere.
    inflight?.abort();
    inflight = new AbortController();

    // Kald dit eget backend-endpoint — nøglen må aldrig ligge i browseren.
    let results;
    try {
      const res = await fetch('/api/adresse?q=' + encodeURIComponent(q), {
        signal: inflight.signal,
      });
      ({ results } = await res.json());
    } catch (err) {
      if (err.name === 'AbortError') return; // et nyere kald har overtaget
      throw err;
    }

    liste.innerHTML = '';
    for (const r of results) {
      const li = document.createElement('li');
      li.textContent = r.betegnelse;
      li.addEventListener('click', () => {
        input.value = r.betegnelse;
        // Felterne kommer med i samme svar — ingen ekstra opslag.
        form.vejnavn.value = r.vejnavn ?? '';
        form.husnr.value = r.husnr ?? '';
        form.postnr.value = r.postnr ?? '';
        form.by.value = r.postnrnavn ?? '';
        // Gem nøglerne: adgangsadresse_id er stabil, bfe_nummer peger på ejendommen.
        form.adresse_id.value = r.adgangsadresse_id;
        liste.innerHTML = '';
      });
      liste.append(li);
    }
  }, 150);
});