---
title: Autocomplete
lang: en-US
---

## Autocomplete

You can get some recommended tips based on the current input.

:::demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.

autocomplete/autocomplete

:::

## Custom template

Customize how suggestions are displayed.

:::demo Use `scoped slot` to customize suggestion items. In the scope, you can access the suggestion object via the `item` key.

autocomplete/autocomplete-template

:::

## Remote search

Search data from server-side.

:::demo

autocomplete/remote-search

:::

## Autocomplete Attributes

| Attribute                         | Description                                                                                                                | Type                            | Accepted Values                                                | Default      |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------------------- | ------------ |
| placeholder                       | the placeholder of Autocomplete                                                                                            | string                          | —                                                              | —            |
| clearable                         | whether to show clear button                                                                                               | boolean                         | —                                                              | false        |
| disabled                          | whether Autocomplete is disabled                                                                                           | boolean                         | —                                                              | false        |
| value-key                         | key name of the input suggestion object for display                                                                        | string                          | —                                                              | value        |
| icon                              | icon component                                                                                                             | string / Component              | —                                                              | —            |
| model-value / v-model             | binding value                                                                                                              | string                          | —                                                              | —            |
| debounce                          | debounce delay when typing, in milliseconds                                                                                | number                          | —                                                              | 300          |
| placement                         | placement of the popup menu                                                                                                | string                          | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
| fetch-suggestions                 | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | —                                                              | —            |
| popper-class                      | custom class name for autocomplete's dropdown                                                                              | string                          | —                                                              | —            |
| trigger-on-focus                  | whether show suggestions when input focus                                                                                  | boolean                         | —                                                              | true         |
| name                              | same as `name` in native input                                                                                             | string                          | —                                                              | —            |
| select-when-unmatched             | whether to emit a `select` event on enter when there is no autocomplete match                                              | boolean                         | —                                                              | false        |
| label                             | label text                                                                                                                 | string                          | —                                                              | —            |
| prefix-icon                       | prefix icon class                                                                                                          | string / Component              | —                                                              | —            |
| suffix-icon                       | suffix icon class                                                                                                          | string / Component              | —                                                              | —            |
| hide-loading                      | whether to hide the loading icon in remote search                                                                          | boolean                         | —                                                              | false        |
| popper-append-to-body(deprecated) | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | boolean                         | -                                                              | false        |
| teleported                        | whether select dropdown is teleported to the body                                                                          | boolean                         | true / false                                                   | true         |
| highlight-first-item              | whether to highlight first item in remote search suggestions by default                                                    | boolean                         | —                                                              | false        |

## Autocomplete Slots

| Name    | Description                                                           |
| ------- | --------------------------------------------------------------------- |
| —       | Custom content for input suggestions. The scope parameter is { item } |
| prefix  | content as Input prefix                                               |
| suffix  | content as Input suffix                                               |
| prepend | content to prepend before Input                                       |
| append  | content to append after Input                                         |

## Autocomplete Events

| Event Name | Description                                      | Parameters                |
| ---------- | ------------------------------------------------ | ------------------------- |
| select     | triggers when a suggestion is clicked            | suggestion being clicked  |
| change     | triggers when the icon inside Input value change | (value: string \| number) |

## Autocomplete Methods

| Method | Description             | Parameters |
| ------ | ----------------------- | ---------- |
| focus  | focus the input element | —          |
| blur   | blur the input element  | —          |