> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ais-autocomplete

> Provides logic for creating an autocomplete component in Vue.

export const Index = () => <Tooltip tip="An Algolia index is a searchable dataset that consists of records and configuration settings. These settings define how the records are searched and ranked.">
    index
  </Tooltip>;

```vue Signature theme={"system"}
<ais-autocomplete
  // Optional parameters
  :escape-html="boolean"
  :class-names="object"
/>
```

## Import

<Tabs>
  <Tab title="Component">
    To ensure optimal bundle sizes,
    see [Optimize build size](/doc/guides/building-search-ui/going-further/improve-performance/vue#optimize-build-size).

    ```js Vue icon=code theme={"system"}
    import { AisAutocomplete } from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    export default {
      components: {
        AisAutocomplete,
      },
      // ...
    };
    ```
  </Tab>

  <Tab title="Plugin">
    This imports all widgets, even the ones you don't use.
    For more information, see [Get started with Vue InstantSearch](/doc/guides/building-search-ui/getting-started/vue).

    ```js JavaScript icon="code" theme={"system"}
    import Vue from "vue";
    import InstantSearch from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    Vue.use(InstantSearch);
    ```
  </Tab>
</Tabs>

<Card title="See this widget in action" icon="monitor-play" href="https://instantsearchjs.netlify.app/stories/vue/?selectedKind=ais-autocomplete" horizontal>
  Preview this widget and its behavior.
</Card>

## 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`](/doc/api-reference/widgets/hits-per-page/vue) widget or the [`ais-configure`](/doc/api-reference/widgets/configure/vue) widget.
* To retrieve results from multiple indices, use the [`ais-index`](/doc/api-reference/widgets/index-widget/vue) widget.

The Autocomplete UI library lets you build a full-featured, accessible search experience.

See also: [Integrate Autocomplete with Vue InstantSearch](/doc/ui-libraries/autocomplete/integrations/with-vue-instantsearch)

## Examples

```vue Vue icon=code theme={"system"}
<ais-autocomplete />
```

## Props

<ParamField body="escape-html" type="boolean" default={true}>
  Whether to escape HTML entities from hits string values.

  ```vue Vue icon=code theme={"system"}
  <ais-autocomplete :escape-html="false" />
  ```
</ParamField>

<ParamField body="class-names" type="object" default="{}">
  The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/vue#style-your-widgets):

  * `ais-Autocomplete`. The container of the widget.

  ```vue Vue icon=code theme={"system"}
  <ais-autocomplete
    :class-names="{
      'ais-Autocomplete': 'MyCustomAutocomplete',
    }"
  />
  ```
</ParamField>

## Customize the UI

<ParamField body="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 <Index /> in first position.
  You can use [the highlighting feature](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/vue#highlight-and-snippet-your-search-results) through the [`highlight`](/doc/api-reference/widgets/highlight/vue) 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`](/doc/api-reference/widgets/insights/vue) middleware.
    * `eventType: 'click' | 'conversion'`
    * `hit: Hit | Hit[]`
    * `eventName: string`

  ```vue Vue icon=code theme={"system"}
  <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>
  ```
</ParamField>