UX Patterns Guide
Back to compare picker

Search suggestions vs Autocomplete

Prefer search suggestions when several query paths may be useful.

Search suggestions live exampleAutocomplete live example

Decision dimensions

Dimension Search suggestionsAutocomplete
UI or UX UI + UX - Suggested-query surfaceUI + UX - Input widget with suggestion behavior
UI guidance Render a search field with query suggestions, active option, selected suggestion, and no-suggestion state.Render a labeled text field, suggestion popup, highlighted option, selected value, and no-match state.
UX guidance Help users formulate better search queries without forcing a choice.Help users complete a known value faster without forcing an incorrect suggestion.
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 Suggestions overlay unrelated content without a dismiss path.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 No input state.Empty input state.
Accessibility burden Expose the suggestions list and active option.Expose combobox expanded state, active descendant, and option labels.
Common misuse Auto-submitting the top suggestion without confirmation.Forcing the first suggestion when the user did not choose it.

Search suggestions

UI or UX
UI + UX - Suggested-query surface
UI guidance
Render a search field with query suggestions, active option, selected suggestion, and no-suggestion state.
UX guidance
Help users formulate better search queries without forcing a choice.
Good UI
Suggestions appear directly below the search field with active row, readable labels, and optional matched text.
Bad UI
Suggestions overlay unrelated content without a dismiss path.
Good UX
Users can keep typing, choose a suggestion, dismiss suggestions, or submit their own query.
Bad UX
Auto-submitting the top suggestion.
Best fit
The system can predict likely queries.
Avoid when
Suggestions are low quality or biased toward irrelevant content.
Required state
No input state.
Accessibility burden
Expose the suggestions list and active option.
Common misuse
Auto-submitting the top suggestion without confirmation.

Autocomplete

UI or UX
UI + UX - Input widget with suggestion behavior
UI guidance
Render a labeled text field, suggestion popup, highlighted option, selected value, and no-match state.
UX guidance
Help users complete a known value faster without forcing an incorrect suggestion.
Good UI
Persistent label above the input, readable text size, clear popup alignment, and visible highlighted option.
Bad UI
Placeholder-only label that disappears after typing.
Good UX
Typing filters suggestions while preserving the exact typed value.
Bad UX
Automatically forcing the first suggestion into the field.
Best fit
The list is long but values are known.
Avoid when
The task is open-ended query exploration.
Required state
Empty input state.
Accessibility burden
Expose combobox expanded state, active descendant, and option labels.
Common misuse
Forcing the first suggestion when the user did not choose it.
Decision rules
  • Prefer search suggestions when several query paths may be useful.
  • Prefer autocomplete for constrained values such as addresses, products, people, or codes.
  • Keep typed input editable and never force an irrelevant suggestion.
Inspect live examples
Search suggestionsAutocomplete
Failure modes
  • Submitting a suggestion before the user confirms it.
  • Using autocomplete where free-form search is expected.
  • Showing stale suggestions that do not match the current input.