Predicting and suggesting completions for a value the actor is actively typing, so they can pick from a narrowing set of options instead of finishing the thought themselves.
Part of the assisted task completion spectrum, at the most reactive end — the system takes almost no initiative here.
Design considerations
- Recent and frequent items often beat algorithmic suggestions, or at least deserve a spot alongside them
- Worth distinguishing narrowing (filtering a known list) from expanding (proposing related or trending terms the actor hasn’t thought of)
Related components
- Input — the primitive that autocomplete builds on
- Combobox — component this pattern builds on
- Combobox — that stance’s large-scale control: autocomplete mechanics with a candidate-channel commit
Resources & references
- Baymard Institute 9 UX best practice design patterns for autocomplete suggestions
- Friedman Five simple steps for better autocomplete UX. Smart Interface Design Patterns
Related patterns
Precedes
- AI completion — autocomplete's candidates are looked up, not produced — deterministic completion ends where the continuation has to be generated; AI completion extends the same interaction to generated content
Enables
- Data entry — autocomplete as a way to reduce input friction
Enacts
- Learnability — suggestions teach people what options exist
Complements
- Autofill — the preemptive counterpart: pre-populates from stored values rather than completing what the actor types (and what the HTML `autocomplete` attribute actually controls)
- Bounded choice — the selection autocomplete often serves
- Assisted task completion — the spectrum autocomplete sits within
- Suggestion — system-generated recommendations more broadly
- Searching — autocomplete in search fields is really a seeking pattern
- Command menu — autocomplete applied to actions and navigation
- Filtering — autocomplete within filter value selection
Preceded by
- Good defaults — fields hold the system's best static guess — which serves only until the actor starts typing a value of their own; completion then has to happen in flight rather than up front
Hosted by
- Form — form fields are where the completion surface most commonly lives
