Web Components 単一選択 ComboBox
Web Components ComboBox は、単一選択モードと、メインの入力プロンプトを介した項目リストのクイック フィルタリングをサポートしています。ユーザーは、数文字タイプすることで、オプションのリストに探している項目を表示できます。Enter キーを押すと、最初に強調表示された一致が選択されます。
Web Components 単一選択の例
単一選択とクイック フィルタリングを有効にするには、ComboBox コンポーネントで singleSelect プロパティを設定します。ユーザー エクスペリエンスとキーボード ナビゲーションはほとんど変わりませんが、オプション リストの上にある特別なフィルター ボックスに検索クエリを入力する代わりに、メインの入力ボックスが使用されます。
<igc-combo single-select></igc-combo>
選択 API
singleSelect プロパティが適用された ComboBox の選択 API はほとんど同じままですが、このプロパティが設定されていない ComboBox と比べて重要な違いがいくつかあります。
主な違いは、一度に 1 つの項目しか選択できないことです。たとえば、コンボ コンポーネントに valueKey を指定した場合、複数の項目を select/deselect メソッドに渡しても効果はありません。これは、以前に選択した項目が、新しい選択を行うと自動的に選択解除されることも意味します。
単一の選択コンボでプログラムによって項目を選択 / 選択解除する方法は次のとおりです。
項目の選択:
// select the item matching the 'BG01' value of the value key field.
combo.select('BG01');
新たに選択せずに項目の選択を解除するには、deselect メソッドを呼び出します。
項目の選択解除:
// deselect the item matching the 'BG01' value of the value key field.
combo.deselect('BG01');
無効な機能
当然のことながら、一部の構成オプションは単一選択 ComboBox では効果がありません。
プレースホルダー
placeholderSearch プロパティに値を割り当てても結果は得られません。これは、通常、オプションのリストの上に配置されるフィルター入力が単一の選択 ComboBox に存在しないためです。
オプション リストのオートフォーカス
単一選択 ComboBox に autofocusList オプションを設定しても効果はありません。
キーボード ナビゲーション
キーボード ナビゲーションは、非単一選択 ComboBox と同じように動作しますが、メイン入力がフィルタリング プロンプトの役割を果たし、フィルタリング / 検索入力に適用されるすべてのキーボード アクションがメイン入力プロンプトに移動される点が異なります。
その他の機能
他のすべての機能は、非単一選択 ComboBox コンポーネントと同じように動作します。