Autocomplete

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

Custom template

Customize how suggestions are displayed.

Search data from server-side.

Autocomplete Attributes

AttributeDescriptionTypeAccepted ValuesDefault
placeholderthe placeholder of Autocompletestring
clearablewhether to show clear buttonbooleanfalse
disabledwhether Autocomplete is disabledbooleanfalse
value-keykey name of the input suggestion object for displaystringvalue
iconicon componentstring / Component
model-value / v-modelbinding valuestring
debouncedebounce delay when typing, in millisecondsnumber300
placementplacement of the popup menustringtop / top-start / top-end / bottom / bottom-start / bottom-endbottom-start
fetch-suggestionsa method to fetch input suggestions. When suggestions are ready, invoke callback(data:[]) to return them to AutocompleteFunction(queryString, callback)
popper-classcustom class name for autocomplete's dropdownstring
trigger-on-focuswhether show suggestions when input focusbooleantrue
namesame as name in native inputstring
select-when-unmatchedwhether to emit a select event on enter when there is no autocomplete matchbooleanfalse
labellabel textstring
prefix-iconprefix icon classstring / Component
suffix-iconsuffix icon classstring / Component
hide-loadingwhether to hide the loading icon in remote searchbooleanfalse
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 falseboolean-false
teleportedwhether select dropdown is teleported to the bodybooleantrue / falsetrue
highlight-first-itemwhether to highlight first item in remote search suggestions by defaultbooleanfalse

Autocomplete Slots

NameDescription
prefixcontent as Input prefix
suffixcontent as Input suffix
prependcontent to prepend before Input
appendcontent to append after Input

Autocomplete Scoped Slot

NameDescription
Custom content for input suggestions. The scope parameter is

Autocomplete Events

Event NameDescriptionParameters
selecttriggers when a suggestion is clickedsuggestion being clicked
changetriggers when the icon inside Input value change(value: string | number)

Autocomplete Methods

MethodDescriptionParameters
focusfocus the input element

Source

ComponentDocs

Contributors