Address Autocomplete — Search-As-You-Type HTML CSS JS

Address autocomplete is one of the highest-value form upgrades you can make: typing a full street address by hand is slow and error-prone, while a filtered suggestion list lets users confirm an address in two keystrokes. This snippet builds the complete pattern — without a paid geocoding API — over a static address list, ready to swap for a real provider.

Debounced filtering

Every keystroke clears a pending setTimeout and schedules a new one 220ms out, so the filter only runs once typing pauses rather than on every single character. This is the standard debounce pattern for search-as-you-type: it keeps the UI responsive while avoiding wasted filter passes (or, with a real API, wasted network requests) on every keystroke.

Substring highlighting

highlight() finds the query's position in each candidate's text with indexOf and wraps the matching slice in a <mark> tag, styled here as a colored, bold span rather than the default yellow highlight. This lets users see *why* each suggestion matched, which builds trust in the list faster than an unhighlighted result.

Full keyboard navigation

Arrow Down/Up move an activeIndex through the visible <li> items, toggling an .active class and calling scrollIntoView({ block: 'nearest' }) so the highlighted item never leaves the dropdown's visible area on a long list. Enter selects the active item (or does nothing if none is highlighted, avoiding an accidental selection), and Escape closes the dropdown without selecting — mirroring native <select> and combobox behavior so keyboard users get an experience they already know.

Selection state and confirmation

Selecting an address (by click or Enter) fills the input with the address's main line, reveals a green confirmation chip showing the full address, and shows a clear ("✕") button. Typing again after a selection hides the confirmation chip immediately, so the UI never shows a stale "confirmed" state next to an edited query.

Animation and dismissal

The dropdown fades and slides in with opacity/transform only (never height), and closes the same way before being hidden via hidden after the transition — keeping it crash-safe across every export target. A document-level click listener closes the list when you click anywhere outside the .aac-wrap container, the same outside-click pattern used by dropdown menus and popovers throughout this library.

Accessibility and a real production geocoder

This demo filters a small static array client-side, which is enough to show the interaction pattern but not enough for real addresses worldwide. A production build swaps the array filter for a debounced fetch to a geocoding provider — Google Places, Mapbox, or Loqate all expose an autocomplete endpoint that takes a partial query and returns ranked suggestions — while keeping the exact same debounce timing, highlight rendering, and keyboard handling described above. For accessibility, add role="combobox" to the input, role="listbox" to the suggestion list, and aria-activedescendant pointing at the currently highlighted option's id, so screen reader users get the same "which suggestion is focused" feedback that sighted keyboard users already see via the .active class.