ais-autocomplete

Signature

<ais-autocomplete
  // Optional parameters
  :escapeHTML="boolean"
  :requires-search="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 several 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

boolean

default:true

Whether to escape HTML entities from hits string values.

Vue

<ais-autocomplete :escapeHTML="false" />

boolean

default:true

Whether the widget makes InstantSearch require a main search request. By default (true), the widget contributes to the main search. Set it to false to opt the widget out of the main search: if it’s the only widget on the page, InstantSearch doesn’t send a main search request.

Vue

<ais-autocomplete :requires-search="false" />

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

The slot to override the complete DOM output of the widget.If you use this slot, the other slots don’t change the output, because 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 includes:

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>

Prebuilt autocomplete component

The ais-experimental-autocomplete component renders a complete autocomplete menu: a search box, a panel with results from one or more indices, recent searches, Query Suggestions, prompt suggestions, and a detached layout for small screens. It uses the same markup and most of the same options as the InstantSearch.js autocomplete widget, so see that page for details about each option. The JavaScript container and templates options don’t apply: Vue renders the component in place, and slots replace templates. Use class-names for cssClasses and get-search-page-url for getSearchPageURL.

The component is experimental: its name and API may change in a later version.

Vue

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

Vue

<template>
  <ais-instant-search :search-client="searchClient" index-name="INDEX_NAME">
    <ais-experimental-autocomplete
      placeholder="Search for products"
      :indices="indices"
      :show-recent="true"
      :show-query-suggestions="{ indexName: 'QUERY_SUGGESTIONS_INDEX_NAME' }"
    >
      <template #header="{ indexName }">
        <span>{{ indexName }}</span>
      </template>
      <template #item="{ item, onSelect }">
        <div @click="onSelect">{{ item.name }}</div>
      </template>
    </ais-experimental-autocomplete>
    <ais-hits />
  </ais-instant-search>
</template>

<script>
import { liteClient as algoliasearch } from "algoliasearch/lite";
import { AisInstantSearch, AisExperimentalAutocomplete, AisHits } from "vue-instantsearch";

export default {
  components: { AisInstantSearch, AisExperimentalAutocomplete, AisHits },
  data() {
    return {
      searchClient: algoliasearch("ALGOLIA_APPLICATION_ID", "ALGOLIA_SEARCH_API_KEY"),
      indices: [
        {
          indexName: "INDEX_NAME",
          getURL: (item) => `/products/${item.objectID}`,
        },
      ],
    };
  },
};
</script>

The component runs autocomplete searches separately from the main search. It starts searching when users focus the search box, or on page load if autofocus is true. The component reads its props only when initialized. Changing them later doesn’t have any effect.

Props

Prop	Type	Default
`indices`	`object[]`
`feeds`	`object[]`
`show-query-suggestions`	`object`
`show-prompt-suggestions`	`object`
`show-recent`	`boolean \| object`	`false`
`search-parameters`	`object`	`{ hitsPerPage: 5 }`
`transform-items`	`function`
`on-select`	`function`
`get-search-page-url`	`function`
`placeholder`	`string`
`autofocus`	`boolean`	`false`
`detached-media-query`	`string`	`(max-width: 680px)`
`translations`	`object`
`ai-mode`	`boolean`	`false`
`requires-search`	`boolean`	`true`
`escapeHTML`	`boolean`	`true`
`class-names`	`object`	`{}`

indices and feeds are mutually exclusive. Setting both throws an error. feeds requires a composition-based InstantSearch instance with compositionID set.
show-prompt-suggestions and ai-mode send the query to an ais-chat widget in the same index.
Write escapeHTML in camelCase. The kebab-case form escape-html doesn’t bind.
class-names uses the keys of the InstantSearch.js cssClasses option, such as root, panel, and panelOpen, not ais- class names.

Slots

Slot	Scope	Replaces
`item`	`item`, `indexName`, `onSelect`, `onApply`	Each item of an index in `indices` or `feeds`
`header`	`items`, `indexName`	The header of an index in `indices` or `feeds`
`noResults`	`indexName`	The content of an index in `indices` or `feeds` without results
`querySuggestionItem`	`item`, `indexName`, `onSelect`, `onApply`	Each Query Suggestions item
`querySuggestionHeader`	`items`, `indexName`	The Query Suggestions header
`promptSuggestionItem`	`item`, `indexName`, `onSelect`, `onApply`	Each prompt suggestion
`promptSuggestionHeader`	`items`, `indexName`	The prompt suggestions header
`recentItem`	`item`, `onSelect`, `onApply`, `onRemoveRecentSearch`	Each recent search
`recentHeader`	`items`	The recent searches header
`panel`	`elements`, `indices`	The panel content. `elements` holds the rendered sections, keyed by `recent`, `suggestions`, `promptSuggestions`, and index name.

​Import

See this widget in action

​About this widget

​Examples

​Props

​Customize the UI

​Prebuilt autocomplete component

​Props

​Slots

Import

About this widget

Examples

Props

Customize the UI

Prebuilt autocomplete component

Props

Slots