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.

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	`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`	—
label	label text	`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-bodydeprecated	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
default	custom content for input suggestions. The scope parameter is
prefix	content as Input prefix
suffix	content as Input suffix
prepend	content to prepend before Input
append	content to append after Input

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`