Components
<AisAutocomplete>
Autocomplete connector wrapper for custom UI rendering.
AisAutocomplete is renderless by design: provide a default slot to display input and grouped results.
Usage
<AisInstantSearch :configuration="configuration">
<AisAutocomplete>
<template #default="{ currentRefinement, refine, indices }">
<input
:value="currentRefinement"
type="search"
@input="refine(($event.currentTarget as HTMLInputElement).value)"
>
<ul v-for="index in indices" :key="index.indexId">
<li>{{ index.indexName }} ({{ index.hits.length }})</li>
</ul>
</template>
</AisAutocomplete>
</AisInstantSearch>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
escapeHTML | boolean | connector default | Escapes HTML in autocomplete items. |
id | string | "" | Optional widget ID for repeated instances in the same index scope. |
Slots
| Slot | Slot props | Description |
|---|---|---|
default | { refine, currentRefinement, indices } | Full renderless contract for query input + grouped results UI. |
End-to-end example
components/AutocompleteSearch.vue
<template>
<AisInstantSearch :configuration="configuration">
<AisAutocomplete>
<template #default="{ currentRefinement, refine, indices }">
<input
:value="currentRefinement"
type="search"
placeholder="Search across products"
@input="refine(($event.currentTarget as HTMLInputElement).value)"
/>
<section v-for="index in indices" :key="index.indexId">
<h3>{{ index.indexName }} ({{ index.hits.length }})</h3>
<ul>
<li v-for="hit in index.hits" :key="hit.objectID">
<NuxtLink :to="`/products/${hit.objectID}`">
{{ hit.name }}
</NuxtLink>
</li>
</ul>
</section>
</template>
</AisAutocomplete>
</AisInstantSearch>
</template>
For a complete multi-index pattern, see
/examples/autocomplete-multi-index.