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 |
Caveats
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.
The auto property of menu-props is only supported for the default input style.
Browser autocomplete is set to off by default, may vary by browser and may be ignored. MDN
Examples
Below is a collection of simple to complex examples.
Props
Density
You can use density prop to adjusts vertical spacing within the component.
Filter
The filter prop can be used to filter each individual item with custom logic. In this example we filter items by name.
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
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.
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
This feature was introduced in v3.3.0 (Icarus)
The auto-select-first property highlights the first result when searching, allowing you to press