43 Typeahead. 43 of 95.
43/NAVIGATION/43 of 95
Typeahead
Search should react to every keystroke.
The problem
Waiting to press a search button and reload results makes finding something feel slow and disconnected.
The solution
Results filter live with matched characters highlighted.
Experiment
Play with the values
120ms
How it works
- Each keystroke is new input, and the results should respond to it.
- A short debounce groups bursts of typing so the filter does not run on every intermediate letter.
- The dataset is filtered against the current query.
- Matched characters are highlighted so the reason for each result is visible.
- The list renders live as the query changes.
Seen in
Search bars
Suggestions and results appear as you type, not after submit.
Select menus
Long option lists filter instantly to what you typed.
Mentions
@-mention pickers narrow to matching people live.
Tag pickers
Existing tags surface as you type, with matches highlighted.