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
Below is a collection of simple to complex examples.
You can use dense
prop to reduce autocomplete height and lower max height of list items.
The filter
prop can be used to filter each individual item with custom logic. In this example we filter items by name.
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.
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.
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.
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 slots enables you to easily customize the desired look for your application.
Using a combination of v-autocomplete
slots and transitions, you can create a stylish toggleable autocomplete field such as this state selector.