What the person is doing
The product can produce useful suggestions from content, history, or taxonomy.
Foundation · lesson 3 of 20 · Search, Browse, And Discovery
Search suggestions
Underlying principle: Discovery supports several starting points: a known term, a broad category, a partial memory, or a set of constraints. The interface helps people refine their understanding while they search.
Show relevant suggested queries or result hints tied to the current input, while preserving user control of the final query.
Study the interaction
Follow the task before choosing the component
Discovery supports several starting points: a known term, a broad category, a partial memory, or a set of constraints. The interface helps people refine their understanding while they search.
What the interface must communicate
Show relevant suggested queries or result hints tied to the current input, while preserving user control of the final query.
Typing state with suggestions.
What to look for
Do suggestions help users express intent, or are they distracting from the search task?
Selecting a suggestion makes the resulting query clear.
Decision first
Choose this pattern when the problem matches
Use when
- The system can predict likely queries.
- Users benefit from vocabulary guidance.
Avoid when
- Suggestions are low quality or biased toward irrelevant content.
- The input is a constrained value better served by autocomplete.
Problem it prevents
The product can produce useful suggestions from content, history, or taxonomy.
Test the behavior
Try strong and weak versions of the interaction
Open the working example, try its controls, and compare the behavior against the decision guidance.
In the lab you can
Launch Search suggestions in the lab - switch between strong UI, weak UI, strong UX, and weak UX;
- trigger required, empty, loading, error, and recovery states;
- inspect keyboard and accessibility expectations beside the demo.
Pattern anatomy
What a strong implementation has to make clear
The product can produce useful suggestions from content, history, or taxonomy.
Show relevant suggested queries or result hints tied to the current input, while preserving user control of the final query.
Typing state with suggestions.
Stale suggestions after the query changes.
Expose the suggestions list and active option.
Quality bar
The difference between expert and weak execution
Strong implementation
Specific, visible, recoverable
- Suggestions appear directly below the search field with active row, readable labels, and optional matched text.
- Recent, popular, or scoped suggestions are visually distinguished when mixed.
- Users can keep typing, choose a suggestion, dismiss suggestions, or submit their own query.
Weak implementation
Vague, hidden, hard to recover from
- Promoted results styled the same as typed query suggestions.
- Auto-submitting the top suggestion.
- Stale suggestions remain after query changes.
- Stale suggestions after the query changes.
UI guidance
- Render a search field with query suggestions, active option, selected suggestion, and no-suggestion state.
- Keep suggestions visually tied to the current input.
UX guidance
- Help users formulate better search queries without forcing a choice.
- Preserve free-form typing and avoid submitting suggestions without confirmation.
Implementation contract
What the implementation must handle
States
- Typing state with suggestions.
- Selected suggestion state.
Interaction
- Selecting a suggestion makes the resulting query clear.
- Users can dismiss or continue typing.
Accessibility
- Expose the suggestions list and active option.
- Arrow keys can move through suggestions.
- Enter can choose a highlighted suggestion.
- Escape dismisses suggestions while keeping input.
Review
- Do suggestions help users express intent, or are they distracting from the search task?
Evidence trail
Source-backed claims behind this guidance
Carbon Design System Search Pattern
IBM Carbon Design System - checked
Carbon search guidance supports recent searches, type-ahead suggestions, keyboard selection, Escape dismissal, and search result counts.
WAI-ARIA Authoring Practices Guide
W3C Web Accessibility Initiative - checked
APG combobox guidance covers popup suggestions and keyboard operation.
Full agent/debug reference
Problem Context
- Users may not know the exact wording used by the system.
- The product can produce useful suggestions from content, history, or taxonomy.
Selection Rules
- Choose suggestions when guidance improves query formulation.
- Keep suggestions relevant to the current input and scope.
- Let users ignore suggestions and continue free-form search.
Required States
- No input state.
- Typing state with suggestions.
- Selected suggestion state.
- No suggestion state.
Interaction Contract
- Suggestions update from the current input without replacing it unexpectedly.
- Selecting a suggestion makes the resulting query clear.
- Users can dismiss or continue typing.
Implementation Checklist
- Debounce remote suggestions where needed.
- Highlight matching text only when it helps recognition.
- Keep keyboard and pointer selection equivalent.
- Handle stale suggestion responses.
Common Generated-UI Mistakes
- Auto-submitting the top suggestion without confirmation.
- Showing unrelated promoted results as suggestions.
- Overwriting typed text unexpectedly.
Critique Questions
- Do suggestions help users express intent, or are they distracting from the search task?
Accessibility
- Expose the suggestions list and active option.
- Do not rely only on visual highlighting for matched text.
Keyboard Behavior
- Arrow keys can move through suggestions.
- Enter can choose a highlighted suggestion.
- Escape dismisses suggestions while keeping input.
Variants
- Recent searches
- Popular searches
- Scoped suggestions
- Inline query suggestions
Verification
Source trail checked: