Use typeahead for live as-you-type result lookup, autocomplete for choosing a known value, search suggestions for query wording help, and basic search for explicit submit-and-results retrieval.
Use typeahead for live as-you-type result lookup, autocomplete for choosing a known value, search suggestions for query wording help, and basic search for explicit submit-and-results retrieval.
Practice the judgment: Imagine this situation: The first live result is silently inserted into the input and users submit the wrong entity. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Typeahead | Autocomplete | Search suggestions | Basic search |
|---|---|---|---|---|
| UI or UX | UI + UX - Live search-as-you-type result lookup with incremental result preview | UI + UX - Input widget with suggestion behavior | UI + UX - Suggested-query surface | UI + UX - Search input and result list |
| UI guidance | Render a labelled input with a live result panel that shows matching result hits, result count, active result, source labels, and loading or stalled state while the user types. | Expose clear visual states for expanded, focused, highlighted, and selected options. | Keep suggestions visually tied to the current input. | Render a labeled search field, result count, matching rows, and clear action. |
| UX guidance | Use typeahead when users benefit from immediate result feedback while typing and can either open a result hit or continue to a full submitted search. | Preserve typed input and make selection reversible before submission. | Help the person reach a clear task outcome. | Help the person reach a clear task outcome. |
| Good UI | Typing ca opens a panel with live case, calendar, and claim results, a 3 results for ca count, active row styling, and source labels. | Persistent label above the input, readable text size, clear popup alignment, and visible highlighted option. | Suggestions appear directly below the search field with active row, readable labels, and optional matched text. | A clearly labeled search field with result count and results placed directly below. |
| Bad UI | The input silently becomes Case 104 because the first result was auto-filled while the user was typing ca. | Placeholder-only label that disappears after typing. | Promoted results styled the same as typed query suggestions. | Results jump, resize, or use heavy borders that make scanning feel like reading a form. |
| Good UX | A user types cas, sees matching case records immediately, selects Case 104, and can still edit the query or submit a full search. | Typing filters suggestions while preserving the exact typed value. | Users can keep typing, choose a suggestion, dismiss suggestions, or submit their own query. | Users can type, revise, clear, and keep context while inspecting results. |
| Bad UX | Slow old results overwrite newer query results and users open the wrong record. | Automatically forcing the first suggestion into the field. | Auto-submitting the top suggestion. | Search silently changes unrelated filters. |
| Best fit | Users search large datasets and benefit from seeing result hits before full submit. | The list is long but values are known. | The system can predict likely queries. | Users know a word, name, or identifier. |
| Avoid when | The task is choosing one constrained field value, which is better handled as autocomplete. | The task is open-ended query exploration. | Suggestions are low quality or biased toward irrelevant content. | The task is choosing a command with side effects. |
| Required state | Empty state before typing. | Empty input state. | Typing state with suggestions. | Empty query state. |
| Accessibility burden | Use a labelled input and expose the live result panel with combobox, listbox, or region semantics appropriate to the interaction. | Expose combobox expanded state, active descendant, and option labels. | Expose the suggestions list and active option. | The input has a stable accessible name. |
| Common misuse | Auto-filling the first result into the input while users type. | Using autocomplete where users expect broad search results. | Showing unrelated promoted results as suggestions. | Using placeholder text as the only label. |