A misspelled city on a shipping address is a failed delivery, a support ticket, and sometimes a chargeback. Free-text city fields are the single most typo-prone field in a checkout form, especially for international orders where the buyer might type a city name in a transliterated or non-native spelling. Autocompleting against a real, per-country city list catches this before the order is placed, not after it's already shipped to the wrong place.
Try typing a German city, as a buyer would at checkout:
Scope the autocomplete to whatever country the buyer already selected in the address form:
function wireCityField(countryCodeInput, cityInput, resultsEl) {
let debounce;
cityInput.addEventListener('input', () => {
clearTimeout(debounce);
const iso = countryCodeInput.value.toLowerCase(); // e.g. from a country <select>
const prefix = cityInput.value.trim().toLowerCase();
if (!prefix) { resultsEl.innerHTML = ''; return; }
debounce = setTimeout(async () => {
const res = await fetch(`https://oneshot.geomelon.dev/${iso}/en/${encodeURIComponent(prefix)}`);
const cities = res.ok ? await res.json() : [];
resultsEl.innerHTML = cities.map((c) => `<div>${c.name}</div>`).join('');
}, 150);
});
}Re-scope the endpoint's country segment whenever the buyer changes the country dropdown — the same pattern used in the live demo above, one call per keystroke, debounced.