API Reference / Vue InstantSearch Widgets / ais-autocomplete
Apr. 24, 2019

ais-autocomplete

Widget signature 
<ais-autocomplete
  // Optional parameters
  :indices="object[]"
  :escape-html="boolean"
  :class-names="object"
/>
See code examples
See Live example

About this widget

The ais-autocomplete widget provides the logic to create a connected component that renders results from Algolia. You can configure it with one or several indices.

Note that the widget isn’t shipped with any third-party dropdown component.

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

Examples

Copy
1

<ais-autocomplete />

Props

indices
type: object[]
default: []
Optional

A list of objects that describe other indices to search into. With each index:

  • label: string: an identifier for the index.
  • value: string: the name of the index to search into.
Copy
1
2
3
4
5

<ais-autocomplete
  :indices="[
    { label: 'Price (desc)', value: 'instant_search_price_desc' },
  ]"
/>
escape-html
type: boolean
default: true
Optional

Whether to escape HTML entities from hits string values.
Copy
1

<ais-autocomplete :escape-html="false" />
class-names
type: object
default: {}
Optional

The CSS classes to override.

  • ais-Autocomplete: the container of the widget.
Copy
1
2
3
4
5

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

Customize the UI

default

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

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:

  • index: string: the name of the index.
  • label: string: the label of the index (for display purposes).
  • hits: object[]: the resolved hits from the index matching the query.
  • results: object: the full results object from the Algolia API.
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<ais-autocomplete :indices="[{ label: 'Price (desc)', value: 'instant_search_price_desc' }]">
  <div slot-scope="{ 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.label">
      <li>
        <h3>{{ index.label }}</h3>
        <ul>
          <li v-for="hit in index.hits" :key="hit.objectID">
            <ais-highlight attribute="name" :hit="hit"/>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</ais-autocomplete>

Did you find this page helpful?

Vue InstantSearch v2