ais-autocomplete

Signature

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

Import

Component
Plugin

To ensure optimal bundle sizes, see Optimize build size.

Vue

import { AisAutocomplete } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

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

This imports all widgets, even the ones you don’t use. For more information, see Get started with Vue InstantSearch.

JavaScript

import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

Vue.use(InstantSearch);

See this widget in action

Preview this widget and its behavior.

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.

The Autocomplete UI library lets you build a full-featured, accessible search experience. See also: Integrate Autocomplete with Vue InstantSearch

Examples

Vue

<ais-autocomplete />

Props

escape-html

boolean

default:true

Whether to escape HTML entities from hits string values.

Vue

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

class-names

object

default:"{}"

The CSS classes you can override:

ais-Autocomplete. The container of the widget.

Vue

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

Customize the UI

default

The slot to override the complete DOM output of the widget.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 contain their hits and results, and the main in first position. You can use the highlighting feature 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

Vue

<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>

​Import

See this widget in action

​About this widget

​Examples

​Props

​Customize the UI

Import

About this widget

Examples

Props

Customize the UI