Skip to main content

Interactions · Search

Autocomplete

Also called: Typeahead, Autosuggest, Search suggestions, Combobox

As the user types, matching suggestions appear live below the input. They can pick one with the mouse or arrow keys, which means less typing and fewer typos.

Example

In detail

Autocomplete is common in search boxes (type "phone" and it suggests "phone case" and "phone stand"), address fields, picking members or tags, and completing email domains. It handles long option lists better than a dropdown select. Users don't have to scroll through hundreds of options, since typing a few letters narrows it down.

Details to think about: debounce the input so you don't send a request for every letter; highlight the matching text in suggestions; support up/down arrow keys to move, Enter to select, and Esc to close; show "No results" when nothing matches; show loading while the request is in flight. Also decide whether users can enter something that isn't a suggestion. A search box can allow it; a city picker can't.

Note that the autocomplete attribute on browser forms is a different thing. It controls whether the browser autofills saved accounts, addresses, and other info.

Developer info
Term ID
interaction-autocomplete
DOM selectors
No DOM cues. This concept isn't detected directly on a page.
Priority
1 · when several match at the same level, the higher priority wins
Version
v1 · updated Sep 29, 2026