Autocomplete
The v-autocomplete component offers simple and flexible type-ahead functionality. This is useful when searching large sets of data or even dynamically requesting information from an API.
API
Allow the menu to overflow off the screen
Appends an icon to the component, uses the same syntax as v-icon
Appends an icon to the outside the component's input, uses same syntax as v-icon
Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.
When searching, will always highlight the first option
Enables autofocus
Changes the background-color of the input
Applies the alternate box input style
Configures the default <input> autocomplete attribute
Keeps a local unique copy of all items that have been passed through the items prop.
Changes display of selections to chips
Applied when using clearable and the input is dirty
Add input clear functionality, default icon is Material Icons clear
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))
Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.
Applies the dark theme variant
Adds a remove icon to selected chips
Lowers max height of list items
Disable the input
Disables the automatic character display when typing
Puts the input in a manual error state
The total number of errors that should display at once
Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation
The filtering algorithm used when searching. example
Removes elevation (shadow) added to element when using the solo or solo-inverted props
Designates input type as full-width
Sets the component height
Hides hint, validation errors
Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the items array changes if not already open.
Do not display in the select menu items that are already selected
Hint text
Set property of items's avatar value
Set property of items's disabled value
Set property of items's text value
Set property of items's value - must be primative. Dot notation is supported
Can be an array of objects or array of strings. When using objects, will look for a text and value field. This can be changed using the item-text and item-value props.
Sets input label
Applies the light theme variant
Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color
Apply a custom character mask to the input. See mask table below for more information
Pass props through to the v-menu component. Accepts either a string for boolean props menu-props="auto, overflowY", or an object :menu-props="{ auto: true, overflowY: true }"
Displays a list of messages or message if using a string
Changes select to multiple. Accepts array for value
Display text when there is no data
Do not apply filtering when searching. Useful when data is being filtered server side
When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state
Applies the outline style to the input
Forces hint to always be visible
Sets the input’s placeholder text
Displays prefix text
Prepends an icon to the component, uses the same syntax as v-icon
Prepends an icon inside the component's input, uses the same syntax as v-icon
Puts input in readonly state
Returns the unmodified masked string
Changes the selection behavior to return the object directly rather than the value specified with item-value
Reverses the input orientation
Accepts an array of functions that return either True or a String with an error message
Use the .sync modifier to catch user input from the search input
Label does not move on focus/dirty
Changes display of selections to chips with the small property
Changes the style of the input
Reduces element opacity until focused
Puts the input in a manual success state
Puts the input in a success state and passes through custom success messages.
Displays suffix text
Sets input type
Delays validation until blur event
Input value
Apply a custom value comparator function
Supplemental
| Mask | Description |
|---|---|
| Masks | |
| # | Any digit |
| A | Any capital letter |
| a | Any small letter |
| N | Any capital alphanumeric character |
| n | Any small alphanumeric character |
| X | Any special symbol (-!$%^&*()_+|~=`{}[]:";'<>?,./\) or space |
| Pre-made | |
| credit-card | #### - #### - #### - #### |
| date-with-time | ##/##/#### ##:## |
| phone | (###) ### - #### |
| social | ###-##-#### |
| time | ##:## |
| time-with-seconds | ##:##:## |
Examples
Searching an API
Easily hook up dynamic data and create a unique experience. The v-autocomplete's expansive prop list makes it easy to fine tune every aspect of the input.
Scoped slots
With the power of scoped slots, you can customize the visual output of the select. In this example we add a profile picture for both the chips and list items.
Custom filter on autocomplete
The filter prop can be used to filter each individual item with custom logic. In this example we filter items by name
Asynchronous items
Sometimes you need to load data externally based upon a search query. Use the search-input prop with the .sync modifier when using the autocomplete prop. We also make use of the new cache-items prop. This will keep a unique list of all items that have been passed to the items prop and is REQUIRED when using asynchronous items and the multiple prop.
Advanced slots
The v-autocomplete component is extremely flexible and can fit in just about any use-case. Create custom displays for no-data, item and selection slots to provide a unique user experience. Using scoped slots enables you to easily customize the desired look for your application.