ais-autocomplete

Signature

<ais-autocomplete
  // Optional parameters
  :escape-html="boolean"
  :class-names="object"
/>

Import

Copy

1
2
3
4
5
6
7
8
9
import { AisAutocomplete } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

export default {
  components: {
    AisAutocomplete
  },
  // ...
};

1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.

See code examples

See live example

About this widget

The ais-autocomplete widget provides the logic to create a connected component that provides access to all indices of your InstantSearch instance.

To configure the number of hits to show, use the ais-hits-per-page widget or the ais-configure widget.

To retrieve results from multiple indices, use the ais-index widget.

If you’re building an autocomplete, you should use the Autocomplete library which lets you build a full-featured, accessible autocomplete experience. This is the recommended way of building an autocomplete search with Algolia.

Guides What is Autocomplete?

Using Autocomplete with Vue

Integrate Autocomplete with Vue InstantSearch

Examples

Copy

1
<ais-autocomplete />

Props


            escape-html

type: boolean

default: true

Optional

Whether to escape HTML entities from hits string values.

Copy
<ais-autocomplete :escape-html="false" />


            class-names

type: object

default: {}

Optional

The CSS classes to override.

ais-Autocomplete: the container of the widget.

Copy
<ais-autocomplete
  :class-names="{
    'ais-Autocomplete': 'MyCustomAutocomplete',
  }"
/>

Customize the UI


            default

The slot to override the complete DOM output of the widget.

Note that when you implement this slot, none of the other slots will change the output, as the default slot surrounds them.

Scope

currentRefinement: string: the current value of the query.
indices: object[]: the list of indices.
refine: (string) => void: the function to change the query.

The indices contains their hits and results, and the main index in first position. You can leverage the highlighting feature of Algolia through the highlight widget (see below). Each index is provided with:

indexName: string: the name of the index.
indexId: string: the id of the index.
hits: object[]: the resolved hits from the index matching the query.
results: object: the full results object from the Algolia API.
sendEvent: (eventType, hit, eventName) => void: the function to send click or conversion events. The view event is automatically sent when the connector renders hits. You can learn more about the insights middleware.
- eventType: 'click' | 'conversion'
- hit: Hit | Hit[]
- eventName: string

Copy
<ais-index index-name="instant_search_price_desc" />
<ais-autocomplete>
  <template v-slot="{ currentRefinement, indices, refine }">
    <input
      type="search"
      :value="currentRefinement"
      placeholder="Search for a product"
      @input="refine($event.currentTarget.value)"
    >
    <ul v-if="currentRefinement" v-for="index in indices" :key="index.indexId">
      <li>
        <h3>{{ index.indexName }}</h3>
        <ul>
          <li v-for="hit in index.hits" :key="hit.objectID">
            <ais-highlight attribute="name" :hit="hit"/>
            <button
              type="button"
              @click="index.sendEvent('click', hit, 'Item Added')"
            >
              Add to cart
            </button>
          </li>
        </ul>
      </li>
    </ul>
  </template>
</ais-autocomplete>

Did you find this page helpful?