Examples
Multi-index Autocomplete
Render grouped suggestions from multiple indices in one input.
This pattern mirrors the playground /autocomplete page.
pages/autocomplete.vue
<template>
<AisInstantSearch :configuration="configuration" instance-key="autocomplete">
<AisAutocomplete>
<template #default="{ currentRefinement, indices, refine }">
<input
type="search"
:value="currentRefinement"
placeholder="Search for a product"
@input="refine(($event.currentTarget as HTMLInputElement).value)"
/>
<section v-for="index in indices" :key="index.indexId">
<h3>{{ index.indexName }}</h3>
<ul>
<li v-for="hit in index.hits" :key="hit.objectID">
<AisHighlight v-if="hit.name" attribute="name" :hit="hit" />
<AisHighlight v-else-if="hit.title" attribute="title" :hit="hit" />
</li>
</ul>
</section>
</template>
</AisAutocomplete>
<AisIndex index="movies" />
</AisInstantSearch>
</template>
AisAutocomplete is renderless, so your slot controls full markup and interaction.