Autocomplete

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

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.

Custom template

Customize how suggestions are displayed.

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

Remote search

Search data from server-side.

Autocomplete Attributes

Name	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
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	—	—
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
fit-input-width	whether the width of the dropdown is the same as the input	boolean	—	false
input-style	the style of the input element or textarea element	object	-	{}
textarea-class	the custom CSS class for textarea element	string	-	-
prefix-class	the custom CSS class for prefix element	string	-	-
suffix-class	the custom CSS class for suffix element	string	-	-
prepend-class	the custom CSS class for prepend element	string	-	-
append-class	the custom CSS class for append element	string	-	-
rounded	rounded input	boolean	-	false
small	small input	boolean	-	false
large	large input	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

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	—