Autocomplete

Get some recommended tips based on the current input.

Basic Usage

Autocomplete component provides input suggestions.

Custom template

Customize how suggestions are displayed.

Remote search

Search data from server-side.

API

Attributes

Name	Description	Type	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
model-value / v-model	binding value	`string`	—
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`	—
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`	—
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
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

Events

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

Slots

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

Instance Exposes

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`

Source

Component • Docs

Contributors

Delyan Haralanov

on the field of hope

Config Provider