Use search suggestions to guide query formulation. Use autocomplete when the user must complete or choose a known value.
Use search suggestions to guide query formulation. Use autocomplete when the user must complete or choose a known value.
Practice the judgment: Imagine this situation: Submitting a suggestion before the user confirms it. 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 | Search suggestions | Autocomplete |
|---|---|---|
| UI or UX | UI + UX - Suggested-query surface | UI + UX - Input widget with suggestion behavior |
| UI guidance | Keep suggestions visually tied to the current input. | Expose clear visual states for expanded, focused, highlighted, and selected options. |
| UX guidance | Help the person reach a clear task outcome. | Preserve typed input and make selection reversible before submission. |
| Good UI | Suggestions appear directly below the search field with active row, readable labels, and optional matched text. | Persistent label above the input, readable text size, clear popup alignment, and visible highlighted option. |
| Bad UI | Promoted results styled the same as typed query suggestions. | Placeholder-only label that disappears after typing. |
| Good UX | Users can keep typing, choose a suggestion, dismiss suggestions, or submit their own query. | Typing filters suggestions while preserving the exact typed value. |
| Bad UX | Auto-submitting the top suggestion. | Automatically forcing the first suggestion into the field. |
| Best fit | The system can predict likely queries. | The list is long but values are known. |
| Avoid when | Suggestions are low quality or biased toward irrelevant content. | The task is open-ended query exploration. |
| Required state | Typing state with suggestions. | Empty input state. |
| Accessibility burden | Expose the suggestions list and active option. | Expose combobox expanded state, active descendant, and option labels. |
| Common misuse | Showing unrelated promoted results as suggestions. | Using autocomplete where users expect broad search results. |