Autocomplete

The Autocomplete component offers simple and flexible type-ahead functionality. This is useful when searching large sets of data.

info

For more details about Vuetify’s usage of AutoComplete component, click AutoComplete page.
For more prop explanations, click Vuetify AutoComplete API page.

Props

Attribute	Description	Type	Default
attach	Specifies which DOM element that this component should detach to.	boolean	false
avoidClearableTabIndex	When the clearable property is set to true, the clearable icon gets the tabIndex. To avoid this, avoidClearableTabIndex prop can be set to true.to.	boolean	false
appendIcon	Appends an icon to the component, uses the same syntax as icon.	string	undefined
appendOuterIcon	Appends an icon to the outside the component's input, uses same syntax as icon	string	undefined
autoSelectFirst	When searching, will always highlight the first option	boolean	false
autofocus	Enables autofocus	boolean	false
backgroundColor	Changes the background-color of the input	string	undefined
class	Allows custom properties to take effect.	string	undefined
clearIcon	Applied when using clearable and the input is dirty	string	undefined
clearable	Add input clear functionality.	boolean	false
compareValue	QLegend is used for comparison values. You can look at the QLegend document	string	undefined
compareText	QLegend is used for comparison values. You can look at the QLegend document	string	undefined
compareTableValue	QLegend is used for comparison values. You can look at the QLegend document	string	undefined
counter	Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.	boolean-number-string	undefined
counterValue		function
dark	Applies the dark theme.	boolean	false
deletableChips	Adds a remove icon to selected chips.	boolean	false
disabled	Disables the input.	boolean	false
eager	Will force the components content to render on mounted.	boolean	false
error	Puts the input in a manual error state.	boolean	false
errorCount	The total number of errors that should display at once	number | string	1
errorMessage	Puts the input in an error state and passes through custom error messages.	string	undefined
format	It is used to format the entered values. You can find more detailed information here	string	undefined
height	Sets the height of the input.	number-string	undefined
hideDetails	Hides hint and validation errors.	boolean-string	undefined
hideNoData	Hides the menu when there are no options to show.	boolean	false
hideSelected	Do not display in the select menu items that are already selected. Also removes checkboxes from the list when multiple	boolean	false
items	Can be an array of objects or array of strings. When using objects, will look for a text, value and disabled keys.	array	undefined
itemDisabled	Set property of items’s disabled value	string-array-function	disabled
itemText	Set property of items’s text value	string-array-function	undefined(text)
itemValue	Set property of items’s value - must be primitive.	string-array-function	undefined(value)
label	Sets input label.	string	undefined
loading	Displays linear progress bar.	boolean	false
maxLength	The maximum size that the entered value can take.	string	undefined
menuProps	Pass props through to the menu component.	string-array -object
multiple	Changes select to multiple. Accepts array for value.	boolean	false
noDataText	Display text when there is no data	string	undefined
noFilter	Do not apply filtering when searching. Useful when data is being filtered server side	boolean	false
outlined	Applies the outlined style to the input.	boolean	false
persistentHint	Forces hint to always be visible.	boolean	false
persistentPlaceHolder	Forces placeholder to always be visible.	boolean	false
placeholder	Sets the input’s placeholder text.	string	undefined
prefix	Displays prefix text	string	undefined
prependIcon	Prepends an icon to the component, uses the same syntax as icon	string	undefined
prependInnerIcon	Prepends an icon inside the component’s input, uses the same syntax as icon.	string	undefined
preventPaste	Prevents copy-pasting of data	boolean	false
readonly	Puts input in readonly state.	boolean	false
rules	Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message.	string-array	undefined
smallChips	Changes display of selections to chips with the small property	boolean	false
solo	Changes the style of the input.	boolean	false
success	Puts the input in a manual success state.	boolean	false
successMessage	Puts the input in a success state and passes through custom success messages.	string	undefined
suffix	Displays suffix text	string	undefined
validateOnBlur	Delays validation until blur event	boolean	false
tabIndex	Allows component to give and receive focus.	number	undefined
value	The input’s value	number	undefined
visible	Visibility of AutoComplete component	boolean	true

Events

Name	Description	Type
blur	Emitted when the input is blurred	Event
change	Emitted when the input is changed by user interaction	any
click	Emitted when input is clicked	MouseEvent
click:append	Emitted when appended icon is clicked	Event
click:append-outer	Emitted when appended outer icon is clicked	Event
click:clear	Emitted when clearable icon clicked	Event
click:prepend	Emitted when prepended icon is clicked	Event
click:prepend-inner	Emitted when prepended inner icon is clicked	Event
filter	The filtering algorithm used when searching.	Event
focus	Emitted when component is focused	Event
input	The updated bound model	any
keydown	Emitted when any key is pressed	KeyboardEvent
mousedown	Emitted when click is pressed	MouseEvent
mouseup	Emitted when click is released	MouseEvent
update:search-input	The search-input.sync event	string

Slots

Name	Description
append	Adds an item inside the input and after input content
append-item	Adds an item after menu content
append-outer	Adds an item outside the input and after input content
counter	{props: {dark: boolean, light: boolean, max: string or number, value: string} }
item	Defines a custom item appearance
label	Replaces the default label
message	{ key: number, // the messages index message: string, // the message}
no-data
prepend	Adds an item outside the input and before input content
prepend-inner	Adds an item inside the input and before input content
prepend-item	Adds an item before menu content
progress	Slot for custom progress linear (displayed when loading prop is not equal to Boolean False)
selection	Defines a custom selection appearance

Usage Scenario

• Each item in the array assigned to the items prop of the component should have keys named text and value.
• Assign text to the itemText prop of the component.
• Assign value to the itemValue prop of the component.
• If only one value is to be displayed (no separate fields for text and value), the same value can be assigned to both keys.