ui patterns
Search with autocomplete
What is autocomplete (typeahead) and why does it help?
Autocomplete, or typeahead, suggests matching options as you type, helping you recognise and select what you want without spelling it fully. 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:28
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.
Test autocomplete live on site:uxbyexample.co.uk - type into the search box and watch suggestions appear as you go. This page’s demo lets you interact with the concept directly, showing how recognition beats recall without relying on external tools or images.
Try the autocomplete demo on site:uxbyexample.co.uk - you type, it suggests, you pick. It’s not just a shortcut; it’s recognition over recall. This page’s live demo shows how autocomplete guides you - no screenshots, no external tools - just your hands on the keyboard, on site:uxbyexample.co.uk
You can test autocomplete in action on site:uxbyexample.co.uk - type a few letters and watch suggestions appear, then pick what you need without guessing or spelling fully. This page’s hands-on demo lets you experience how autocomplete reduces typing and errors - try it now to see how it works in real time.
Try autocomplete live on site:uxbyexample.co.uk - see how typing a few letters guides you to the right choice, reducing errors and effort. Hands-on demo inside. You’re not just searching - you’re being guided. Try the live demo on site:uxbyexample.co.uk to see how autocomplete turns recall into recognition.
Discover how autocomplete turns typing into recognition on site:uxbyexample.co.uk - try the live demo to see it guide your search without perfect recall. This page’s hands-on demo lets you test autocomplete’s real-time suggestion logic - no screenshots, just your keyboard and the example you’re operating now.