# Autocompletes

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

# 使い方

オートコンプリートコンポーネントは v-select を拡張し、アイテムをフィルタする機能を追加します。

# API

# 注意事項

# サンプル

以下に、簡単な例から複雑な例まで示します。

# Props

# Dense

dense プロパティを使用して、autocompleteの高さを減らし、リスト項目の最大高さを下げることができます。

# Filter

filter プロパティを使うと、カスタムロジックで個々のアイテムをフィルタ処理できます。 この例では、アイテムを名前でフィルタリングします。

# Slots

# Item and selection

スロットの活用して、selectのビジュアルをカスタマイズすることができます。 この例では、チップとリストアイテムの両方にプロフィール画像を追加しています。

# その他

# API検索

動的データを簡単にフックして、ユニークなエクスペリエンスを生み出すことができます。 v-autocompleteの豊富なプロパティにより、入力のあらゆる面を簡単に微調整することができます。

# 非同期アイテム

検索クエリに基づいて外部からデータを読み込む必要がある場合もあります。 autocomplete propを使う場合は、search-input propを**.sync** 修飾子と一緒に使ってください。 また、新しい cache-items propも使います。 これはitems propに渡された全てのアイテムの一意なリストを保持するので、非同期アイテムとmultiple propを使うときは必須 です。

# 暗号通貨の選択

v-autocomplete コンポーネントは非常に柔軟性があり、ほぼすべてのユースケースに適合します。 no-data, item, selectionのカスタムディスプレイを作成して、独自のユーザーエクスペリエンスを提供します。 slot を使用すると、アプリケーションの外観を簡単にカスタマイズできます。

# 州名セレクタ

v-autocomplete スロットとトランジションを組み合わせて使用すると、この州名セレクタのような、スタイリッシュな切り替え可能なオートコンプリートフィールドを作成できます。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:05/20/2022, 4:10:15 PM