Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/commerce/search-autocomplete.

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.

Review notes

These notes define scoped usage boundaries without claiming exact prop or runtime truth beyond SDK package reference.

SearchAutocomplete stays a controlled suggestion surface. Static or app-provided suggestions can be passed directly, but live SDK-backed suggestions require an EnadProvider root plus client and search configuration in the surrounding app.

• The component can render and select suggestions; the app decides whether selection navigates, fills the field, or hands off to broader search state.
• debounceMs reduces noisy lookup calls, but it does not replace request cancellation, empty-state handling, error recovery, or stale-result protection in the data layer.
• Keep suggestion rows short, stable, and relevant so autocomplete speeds the decision instead of becoming a second search-results page.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=SearchAutocomplete.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

• SearchAutocomplete uses live suggestions and requires clear provider, client, and search configuration when connected to live data.