Autocomplete

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.

사용법

The autocomplete component extends v-select and adds the ability to filter items.


API

v-autocomplete

보충

Mask legend
MaskDescription
Masks
#Any digit
AAny capital letter
aAny small letter
NAny capital alphanumeric character
nAny small alphanumeric character
XAny special symbol (-!$%^&*()_+|~=`{}[]:";'<>?,./\) or space
Pre-made
credit-card#### - #### - #### - ####
date-with-time##/##/#### ##:##
phone(###) ### - ####
social###-##-####
time##:##
time-with-seconds##:##:##

예제

Searching an APINew in v1.1

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.


Scoped slotsNew in v1.1

With the power of scoped 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.


Custom filter on autocompleteNew in v1.1

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


Asynchronous itemsNew in v1.1

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.


Advanced slotsNew in v1.1

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 scoped slots enables you to easily customize the desired look for your application.