# Autocompletes
v-autocomplete コンポーネントは、シンプルで柔軟な先行入力の機能を提供します。 大量のデータセットを検索したり、API から動的に情報を要求したりする場合に便利です。
# 使い方
オートコンプリートコンポーネントは v-select を拡張し、アイテムをフィルタする機能を追加します。
# API
# 注意事項
items プロパティにオブジェクトを使用する場合、item-text と item-value をオブジェクトの既存のプロパティと関連付ける必要があります。 これらの値は text と value にデフォルトで設定されており、変更できます。
menu-propsのautoプロパティは、デフォルトの入力スタイルでのみサポートされています。
ブラウザーのオートコンプリートはデフォルトで off に設定されており、ブラウザーによって異なる場合があり、無視される可能性があります。 MDN
# サンプル
以下に、簡単な例から複雑な例まで示します。
# 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 スロットとトランジションを組み合わせて使用すると、この州名セレクタのような、スタイリッシュな切り替え可能なオートコンプリートフィールドを作成できます。