nuxt-x-affiliate
Search Bar
Inline search input with keyboard navigation, autocomplete suggestions, and arrow-key selection. Emits search query events.
Search Bar
The XAFSearchBar component renders an inline search input with keyboard navigation, autocomplete suggestions, and an emitted xaf:search:submit window event for analytics. Pairs with <XAFSearchResults> on the results page.
Components
<XAFSearchBar />
<XAFSearchBar
v-model="query"
:suggestions="autocompleteResults"
placeholder="Search reviews..."
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | required | Two-way bound query string |
suggestions | SearchSuggestion[] | — | Autocomplete suggestions, shown as the user types |
placeholder | string | 'Search...' | Input placeholder |
submitOnEnter | boolean | true | Submit on Enter (emits xaf:search:submit) |
navigateOnEnter | string | — | If set, navigate to {base}?q={query} on Enter |
minChars | number | 2 | Min query length before showing suggestions |
compact | boolean | false | Compact pill style for headers |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | string | Emitted on input. Use with v-model. |
submit | string | Emitted on Enter. The window-level xaf:search:submit is also dispatched. |
Suggestion shape
interface SearchSuggestion {
label: string // Display text
href: string // Where to navigate on click / Enter
category?: string // Optional category badge
}
Tips
- For search-engine-friendly URLs, set
navigateOnEnterto/search. The component will navigate to/search?q=fooon Enter, where<XAFSearchResults>reads the query fromuseRoute().query.q. - Listen to the global
xaf:search:submitevent for analytics:window.addEventListener('xaf:search:submit', (e) => { const q = (e as CustomEvent<{ query: string }>).detail.query // Push to GA4, etc. }) - Keep
suggestionsto ≤ 8 items — the keyboard navigation expects a small list.
AI Context
component: XAFSearchBar
package: "@xenterprises/nuxt-x-affiliate"
use-when: Inline search input with autocomplete — typically in XAFSiteHeader