Input & controls

Search Suggest / Autocomplete

Q: How do people describe a Search Suggest / Autocomplete in plain words?

the search box that drops suggestions as I type start typing and it finishes the rest for me Google-style suggestions under the search field

Q: How do I implement a Search Suggest / Autocomplete?

Build autocomplete: combobox + listbox, aria-activedescendant for highlight, debounced fetch, ignore out-of-order responses, arrow/Enter/Escape behavior, match highlighting, and mousedown.preventDefault on options so blur doesn’t close before select.

A search field that offers matching suggestions while you type; choosing one completes the query.

Also known as typeahead · combobox search · autosuggest

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Search Suggest / Autocomplete".

Build autocomplete: combobox + listbox, aria-activedescendant for highlight, debounced fetch, ignore out-of-order responses, arrow/Enter/Escape behavior, match highlighting, and mousedown.preventDefault on options so blur doesn’t close before select.

Anatomy:
- combobox: role="combobox" with aria-expanded tied to the panel.
- listbox: Suggestion panel under the field.
- match highlight: Bold the matched substring so the ranking is obvious.
- recent / trending: Optional empty-query content.

Preferred API / pattern: `cmdk / Downshift / shadcn Combobox`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Stale responses win the race
○Avoid: No debounce
○Avoid: Highlight moves but the input value doesn’t
○Avoid: Option click lost to blur

In plain wordsHow people search for it

“the search box that drops suggestions as I type”“start typing and it finishes the rest for me”“Google-style suggestions under the search field”

AnatomyOpen for part names

combobox: role="combobox" with aria-expanded tied to the panel.
listbox: Suggestion panel under the field.
match highlight: Bold the matched substring so the ranking is obvious.
recent / trending: Optional empty-query content.

How to write itOpen for stack patterns

Web (HTML/CSS)role="combobox" + aria-autocomplete="list"

React + Tailwind + shadcn/uicmdk / Downshift / shadcn Combobox

SwiftUIsearchable + suggestion list

Ant Design<AutoComplete> / <Select showSearch>

Notes

One of the hardest ARIA patterns (combobox + listbox + aria-activedescendant). Debounce requests 150–300ms and drop stale responses by request id—classic race: “phone case” returns after “phone” and overwrites. Arrow keys preview, Enter commits, Escape closes. mousedown preventDefault so blur doesn’t kill the click.

Common mistakesHumans and models trip here

Stale responses win the race: older results paint over newer queries.
No debounce: a request per keystroke (IME composition makes it worse).
Highlight moves but the input value doesn’t: Enter submits the wrong string.
Option click lost to blur: use pointerdown/mousedown preventDefault.

More failure symptoms on AI broke it.

Related patterns

Select / ComboboxA form control for choosing one (or more) options from a list.Form FieldOne complete input unit: label, control, placeholder, helper text, and error message.Dropdown MenuA compact menu of actions or options revealed from a trigger control.

Spotted a wrong name or missing pattern?

Message on X