v-autocomplete コンポーネントはシンプルで柔軟な先行入力機能を提供します。これは大量のデータを検索するときや、APIから動的に情報を要求するときにも便利です。


オートコンプリートコンポーネントは v-select を拡張し、要素をフィルタする機能を追加しています。



Searching an API

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.

Custom filter on autocomplete

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


You can use dense prop to reduce autocomplete height and lower max height of list items.


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.

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.

Advanced slots

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.

Edit this page on Github | Translate on Crowdin
StoreFor Enterprise