Components not listed in the sidebar are not available yet.
Vuetify 2 documentation can be found on vuetifyjs.com
# 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
# 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
# Dense
You can use dense prop to reduce autocomplete height and lower max height of list items.
# 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
# API search
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.
# 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.
# Cryptocurrency selector
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.
# State selector
Using a combination of v-autocomplete slots and transitions, you can create a stylish toggleable autocomplete field such as this state selector.