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

Examples

Below is a collection of simple to complex examples.

Props

Density

You can use density prop to adjusts vertical spacing within the component.

v-autocomplete/prop-density.vue

Filter

The filter prop can be used to filter each individual item with custom logic. In this example we filter items by name.

v-autocomplete/prop-filter.vue

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.

v-autocomplete/slot-item-and-selection.vue

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.

v-autocomplete/misc-asynchronous-items.vue

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.

v-autocomplete/misc-cryptocurrency-selector.vue

State selector

Using a combination of v-autocomplete slots and transitions, you can create a stylish toggleable autocomplete field such as this state selector.

v-autocomplete/misc-state-selector.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.