Web Components 単一選択 ComboBox

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

Web Components 単一選択の例

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

<igc-combo single-select></igc-combo>
html

import { defineComponents, IgcComboComponent, IgcSwitchComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

defineComponents(IgcComboComponent, IgcSwitchComponent);

interface City {
    id: string;
    name: string;
    country: string;
}

const cities: City[] = [
    { name: "London", id: "UK01", country: "UK" },
    { name: "Manchester", id: "UK02", country: "UK" },
    { name: "Birmingham", id: "UK03", country: "UK" },
    { name: "Glasgow", id: "UK04", country: "UK" },
    { name: "Liverpool", id: "UK05", country: "UK" },
    { name: "New York", id: "US01", country: "USA" },
    { name: "Miami", id: "US02", country: "USA" },
    { name: "Philadelphia", id: "US03", country: "USA" },
    { name: "Chicago", id: "US04", country: "USA" },
    { name: "Springfield", id: "US05", country: "USA" },
    { name: "Los Angeles", id: "US06", country: "USA" },
    { name: "Houston", id: "US07", country: "USA" },
    { name: "Phoenix", id: "US08", country: "USA" },
    { name: "San Diego", id: "US09", country: "USA" },
    { name: "Dallas", id: "US010", country: "USA" },
    { name: "Sofia", id: "BG01", country: "Bulgaria" },
    { name: "Plovdiv", id: "BG02", country: "Bulgaria" },
    { name: "Varna", id: "BG03", country: "Bulgaria" },
    { name: "Burgas", id: "BG04", country: "Bulgaria" },
    { name: "Rome", id: "IT01", country: "Italy" },
    { name: "Milan", id: "IT02", country: "Italy" },
    { name: "Naples", id: "IT03", country: "Italy" },
    { name: "Turin", id: "IT04", country: "Italy" },
    { name: "Palermo", id: "IT05", country: "Italy" },
    { name: "Florence", id: "IT06", country: "Italy" }
];

export class ComboSimplified {
    private combo: IgcComboComponent<City>;

    constructor() {
        this.combo = document.getElementById("combo") as IgcComboComponent<City>;
        this.combo.data = cities;

        let switchGroup = document.getElementById("grouping") as IgcSwitchComponent;
        let switchDisable = document.getElementById("disabled") as IgcSwitchComponent;

        switchGroup.addEventListener("igcChange", () => {
            this.combo.groupKey = switchGroup.checked ? "country" : undefined;
        });

        switchDisable.addEventListener("igcChange", () => {
            this.combo.disabled = switchDisable.checked;
        });
    }
}

new ComboSimplified();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Single Selection Combo</title>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
    <link href="https://static.infragistics.com/xplatform/css/samples/custom-legend.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-combo
          id="combo"
          value-key="id"
          display-key="name"
          label="Cities"
          placeholder="Pick a city"
          single-select
        >
        </igc-combo>
        <div class="options">
          <igc-switch id="grouping">Enable Grouping</igc-switch>
          <igc-switch id="disabled">Disable Combo</igc-switch>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.options {
    display: flex;
    flex-direction: column;
    margin-top: 12px; 
    gap: 8px;
}css

このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

選択 API

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

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

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

項目の選択:

// select the item matching the 'BG01' value of the value key field.
combo.select('BG01');
ts

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

項目の選択解除:

// deselect the item matching the 'BG01' value of the value key field.
combo.deselect('BG01');
ts

無効な機能

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

プレースホルダー

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

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

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

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

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

その他の機能

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

API リファレンス

IgcComboComponent