How to add address autocomplete to your checkout

Step 1 — How do I debounce the input?

Query after a few characters and debounce so you don't fire a request on every keystroke:

let t;
input.addEventListener("input", () => {
  clearTimeout(t);
  if (input.value.length < 3) return;
  t = setTimeout(() => suggest(input.value), 200);
});

Step 2 — How do I fetch suggestions?

Proxy the autocomplete call through your backend so the key stays secret, then render the results:

async function suggest(q) {
  const r = await fetch("/api/autocomplete?q=" + encodeURIComponent(q));
  const { suggestions } = await r.json();
  list.innerHTML = suggestions
    .map(s => '<li data-id="' + s.id + '">' + s.label + "</li>")
    .join("");
}

Step 3 — How do I fill the address on select?

Resolve the chosen suggestion to a full PAF address and populate every field at once:

list.addEventListener("click", async (e) => {
  const id = e.target.dataset.id;
  const r = await fetch("/api/resolve?id=" + id);
  const a = await r.json();
  form.line1.value = a.line1;
  form.town.value  = a.town;
  form.postcode.value = a.postcode;
});

Autocomplete vs manual entry at checkout

For the why behind the numbers, see checkout address autocomplete, and to power it use the address autocomplete API. On Shopify? See Shopify address validation.

A modern, UK-first option

AutoPostcode is an affordable, developer-friendly alternative to Loqate, Fetchify and Ideal Postcodes — the same PAF data with a quicker checkout integration.