Blazor 単一選択 ComboBox

    Blazor ComboBox は、単一選択モードと、メインの入力プロンプトを介した項目リストのクイック フィルタリングをサポートしています。ユーザーは、数文字タイプすることで、オプションのリストに探している項目を表示できます。Enter キーを押すと、最初にハイライト表示された一致が選択されます。

    Blazor 単一選択の例

    単一選択とクイック フィルタリングを有効にするには、ComboBox コンポーネントで SingleSelect プロパティを設定します。ユーザー エクスペリエンスとキーボード ナビゲーションはほとんど変わりませんが、オプション リストの上にある特別なフィルター ボックスに検索クエリを入力する代わりに、メインの入力ボックスが使用されます。

    <IgbCombo SingleSelect></IgbCombo>
    

    選択 API

    SingleSelect プロパティが適用された ComboBox の選択 API はほとんど同じままですが、このプロパティが設定されていない ComboBox と比べて重要な違いがいくつかあります。

    主な違いは、一度に 1 つの項目しか選択できないことです。たとえば、コンボ コンポーネントに ValueKey を指定した場合、複数の項目を Select/Deselect メソッドに渡しても効果はありません。これは、以前に選択した項目が、新しい選択を行うと自動的に選択解除されることも意味します。

    単一の選択コンボでプログラムによって項目を選択 / 選択解除する方法は次のとおりです。

    項目の選択:

    <IgbCombo SingleSelect @ref="Combo"></IgbCombo>
    
    @code {
        private IgbCombo Combo;
    
        this.Combo.Select(new object[] { "UK01" });
    }
    

    新たに選択せずに項目の選択を解除するには、deselect メソッドを呼び出します。

    項目の選択解除:

    <IgbCombo SingleSelect @ref="Combo"></IgbCombo>
    
    @code {
        private IgbCombo Combo;
    
        this.Combo.Deselect(new object[] { "UK01" });
    }
    

    無効な機能

    当然のことながら、一部の構成オプションは単一選択 ComboBox では効果がありません。

    プレースホルダー

    PlaceholderSearch プロパティに値を割り当てても結果は得られません。これは、通常、オプションのリストの上に配置されるフィルター入力が単一の選択 ComboBox に存在しないためです。

    オプション リストのオートフォーカス

    単一選択 ComboBox に AutofocusList オプションを設定しても効果はありません。

    キーボード ナビゲーション

    キーボード ナビゲーションは、非単一選択 ComboBox と同じように動作しますが、メイン入力がフィルタリング プロンプトの役割を果たし、フィルタリング / 検索入力に適用されるすべてのキーボード アクションがメイン入力プロンプトに移動される点が異なります。

    その他の機能

    他のすべての機能は、非単一選択 ComboBox コンポーネントと同じように動作します。

    API リファレンス

    その他のリソース