Nuxt Swiftsearch
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.

Copyright © 2026