ui patterns
Search with autocomplete
What is autocomplete (typeahead) and why does it help?
Autocomplete - or typeahead - offers matching options as you type into a search box, so you can recognise and pick the thing you want instead of recalling and spelling it in full. It turns a blank field that demands perfect recall into a guided one that meets you halfway.
Also known as: autocomplete, typeahead, search suggestions, autosuggest
Prefer to watch?
Watch the recap 0:42
The demo
Start typing a country. You won't need to remember the exact name or spell it in full - the box will offer it, and you just pick.
What this demo shows (text version)
A search box for a country. As you type, the demo shows matching countries from a list - matched anywhere in the name, not just the start, and regardless of case. You can click a suggestion or move through them with the arrow keys and press Enter to choose.
The point is that you never had to recall and spell the full name: after a couple of letters the right option appeared and you recognised it. That's recognition over recall applied to input - less typing, fewer errors, and a way through even when you only half-remember the word. A bare box, by contrast, would have left all of that to your memory.
Autocomplete works by swapping recall for recognition: you type a little, the right answer appears, you pick it. That means less typing, fewer spelling and format errors, and a path even when someone only half-remembers the term. Match on more than the prefix, keep the list short and keyboard-navigable, and never let a suggestion act before it's chosen.
You only typed a few letters before the answer appeared - no need to remember the exact name or spell it right. That's recognition doing the work a blank box would have left to your memory. The field met you halfway, and the choice was there to pick rather than to recall.
Autocomplete is recognition over recall, applied to input. A bare search box asks you to remember the exact term and type it without error; suggestions let you recognise the right one from a list, which is far easier and far more forgiving of half-memories, typos and uncertain spelling.
Good matching forgives the user. Match anywhere in the string, not just the start; tolerate minor typos and accents; and rank by what's likely, not just alphabetically. The worst autocomplete is a strict prefix match that vanishes the moment someone's mental label doesn't line up with your exact wording.
Mind the sharp edges: keep the list short so it doesn't bury the page, make it fully keyboard-navigable with arrow keys and Enter, announce results for screen readers, and never let a highlighted suggestion submit or act until the person actually chooses it. A suggestion is an offer, not a decision.