Autocompletes
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.
Usage
The autocomplete component extends v-select and adds the ability to filter items.
API
| Component | Description |
|---|---|
| v-autocomplete | Primary Component |
| v-combobox | A select component that allows for filtering and custom values |
| v-select | A replacement for the HTML |
Caveats
DANGER
When using objects for the items prop, you must associate item-title and item-value with existing properties on your objects. These values are defaulted to title and value and can be changed.
Examples
Below is a collection of simple to complex examples.
Props
Density
You can use density prop to adjust vertical spacing within the component.
Filter
The custom-filter prop can be used to filter each individual item with custom logic. In this example we filter items by name.
TIP
The v-autocomplete component updates the search model on focus/blur events. Focus sets search to the current model (if available), and blur clears it.
Unlike v-combobox, it doesn't keep unlisted values. To prevent unnecessary API requests when querying, ensure that search is not empty and/or doesn't match the current model.
Slots
Item and selection
With the power of 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.
Misc
State selector
Using a combination of v-autocomplete slots and transitions, you can create a stylish toggleable autocomplete field such as this state selector.
New tab
TIP
This feature was introduced in v3.3.0 (Icarus)
The auto-select-first property highlights the first result when searching, allowing you to press