Autocomplete

Get some recommended tips based on the current input.

TIP

This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).

Basic Usage

Autocomplete component provides input suggestions.

Customize how suggestions are displayed.

Search data from server-side.

Override loading content.

Name	Description	Type	Default
model-value / v-model	binding value	`string`	—
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
debounce	debounce delay when typing, in milliseconds	`number`	300
placement	placement of the popup menu	`enum`	bottom-start
fetch-suggestions	a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete	`Array` / `Function`	—
trigger-on-focus	whether show suggestions when input focus	`boolean`	true
select-when-unmatched	whether to emit a `select` event on enter when there is no autocomplete match	`boolean`	false
name	same as `name` in native input	`string`	—
aria-label a11y 2.7.2	native `aria-label` attribute	`string`	—
hide-loading	whether to hide the loading icon in remote search	`boolean`	false
popper-class	custom class name for autocomplete's dropdown	`string`	—
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
highlight-first-item	whether to highlight first item in remote search suggestions by default	`boolean`	false
fit-input-width	whether the width of the dropdown is the same as the input	`boolean`	false

Name	Description	Type
select	triggers when a suggestion is clicked	`Function`
change	triggers when the icon inside Input value change	`Function`

Name	Description	Type
default	custom content for input suggestions	`object`
prefix	content as Input prefix	-
suffix	content as Input suffix	-
prepend	content to prepend before Input	-
append	content to append after Input	-
loading 2.5.0	override loading content	-

Name	Description	Type
activated	if autocomplete activated	`object`
blur	blur the input element	`Function`
close	collapse suggestion list	`Function`
focus	focus the input element	`Function`
handleSelect	triggers when a suggestion is clicked	`Function`
handleKeyEnter	handle keyboard enter event	`Function`
highlightedIndex	the index of the currently highlighted item	`object`
highlight	highlight an item in a suggestion	`Function`
inputRef	el-input component instance	`object`
loading	remote search loading indicator	`object`
popperRef	el-tooltip component instance	`object`
suggestions	fetch suggestions result	`object`