SearchAutocomplete
Search field with debounced suggestions, keyboard-friendly selection, and optional search submission.
Best for
Import
import { SearchAutocomplete } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use SearchAutocomplete when the search box should actively help visitors narrow the result before they commit to a full search. It works well in headers, search overlays, and search-first navigation flows.
If the search field is purely submit-driven and suggestions add little value, a simpler search input can be a better fit.
Composition notes
This is a controlled search surface. value and onValueChange keep the field in sync, suggestions renders the live option list, onSelect handles item choice, and onSearch covers both debounced lookup and explicit search submission.
Model suggestion rows around a stable id plus a visitor-facing label, then add meta, type, and imageUrl only when they help people decide faster. Keep selection behavior explicit: onSelect should either navigate, fill the field, or hand the suggestion off to a larger search state machine.
Use debounceMs to reduce noisy suggestion fetching and keep the backend contract stable.
Behavior and theming guidance
Suggestion lists should stay fast, relevant, and short. Too many options can make the interaction slower instead of more helpful.
Make sure selecting a suggestion has a clear outcome, either navigation, field fill, or filtered query handoff.
Examples
Live examples you can edit directly in the sandbox.
Suggestion list
Use predictive suggestions when the search experience should help visitors pivot before they finish typing.
Async suggestions with loading and no-results states
Drive the dropdown from async state so the same surface can teach loading, selection, explicit submit, and empty-result behavior.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Controlled query string shown inside the search input |
| onValueChange | string | — | Callback fired on every input change so the parent can keep the field and suggestions in sync |
| onSearch | string | — | Debounced lookup callback for remote suggestion fetching, and the fallback submit callback when the visitor presses Enter without choosing a suggestion |
| onSelect | string | — | Callback fired when the visitor picks a suggestion from the listbox, receiving the full suggestion object |
| suggestions | string | [] | Suggestion rows to display under the input; each row can include an image, type badge, and supporting meta text |
| loading | boolean | false | Shows the loading row while async suggestions are being fetched |
| placeholder | string | Search... | Placeholder text rendered inside the search input when no value is present |
| debounceMs | number | 300 | Delay in milliseconds before onSearch is fired after typing stops |
| className | string | — | Additional classes applied to the root wrapper around the input and suggestion list |
| labels | string | {} | Override strings for the clear action, loading state, and empty-result message |