Web Components コンボボックスの機能

Ignite UI for Web Components コンボボックスコンポーネントは、フィルタリングやグループ化などのいくつかの機能を公開しています。

コンボボックス機能の例

以下のデモは、ランタイムで有効または無効にできるいくつかの ComboBox 機能を示しています。

このサンプルでは、IgcSwitchComponent コンポーネントを使用するため、コンボと一緒に登録する必要があります。

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

defineComponents(IgcComboComponent, IgcSwitchComponent);

let combo = document.getElementById('combo') as IgcComboComponent<City>;

let switchIcon = document.getElementById('caseSensitive') as IgcSwitchComponent;
let switchFilter = document.getElementById('filtering') as IgcSwitchComponent;
let switchDisable = document.getElementById('disabled') as IgcSwitchComponent;

switchIcon.addEventListener("igcChange", () => {
    combo.caseSensitiveIcon = switchIcon.checked;
});

switchFilter.addEventListener("igcChange", () => {
    combo.disableFiltering = switchIcon.disabled = switchFilter.checked;
});

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

グループ化は、groupKey プロパティを対応するデータソースフィールドに設定することで有効/無効になることに注意してください。

let switchGroup = document.getElementById('grouping') as IgcSwitchComponent;

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

機能

フィルタリング

コンボボックスのフィルタリングがデフォルトで有効になります。無効にするには、disableFiltering プロパティを設定します。

フィルタリングオプションは、検索の大文字と小文字の区別を有効にすることでさらに拡張できます。caseSensitiveIcon プロパティを使用して大文字と小文字を区別するアイコンをオンにすると、エンドユーザーは大文字と小文字の区別を制御できます。

<igc-combo disable-filtering case-sensitive-icon></igc-combo>

フィルタリングオプション

Ignite UI for Web Components ComboBox コンポーネントは、FilterKey オプションと CaseSensitive オプションの両方の構成を渡すことができるフィルタープロパティをもう 1 つ公開しています。FilterKey は、オプションのリストをフィルタリングするためにどのデータソースフィールドを使用する必要があるかを示します。CaseSensitive オプションは、フィルタリングで大文字と小文字を区別するかどうかを示します。

次のコードスニペットは、名前ではなく国でデータソースから都市をフィルター処理する方法を示しています。また、デフォルトで大文字と小文字を区別するフィルタリングを行います。

const options = {
    filterKey: 'country',
    caseSensitive: true
};

combo.filteringOptions = options;

グループ化

groupKey オプションを定義すると、キーに基づいて項目をグループ化します。

<igc-combo group-key="region"></igc-combo>

[!Note] groupKey プロパティは、データソースが複雑なオブジェクトで構成されている場合にのみ有効です。

ソートの方向

コンボボックスコンポーネントは、グループを昇順または降順でソートするかどうかを設定するオプションも公開します。デフォルトでは、ソート順序は、昇順に設定されています。

<igc-combo group-sorting="desc"></igc-combo>

ラベル

IgcComboComponent ラベルは、label プロパティを使用して簡単に設定できます。

<igc-combo label="Cities"></igc-combo>

プレースホルダー

コンボボックスコンポーネント入力とドロップダウンメニュー内に配置された検索入力の両方に、プレースホルダーテキストを指定できます。

<igc-combo placeholder="Pick a city" placeholder-search="Search for a city"></igc-combo>

オートフォーカス

コンボボックスをページの読み込みに自動的にフォーカスさせたい場合は、次のコードを使用できます。

<igc-combo autofocus></igc-combo>

検索入力のフォーカス

コンボボックスの検索入力はデフォルトでフォーカスされています。この機能を無効にしてフォーカスをオプションのリストに移動するには、以下に示すように autofocusList プロパティを使用します。

<igc-combo autofocus-list></igc-combo>

必須

required プロパティを設定することで、コンボボックスを必須としてマークできます。

<igc-combo required></igc-combo>

コンボボックスを無効にする

disabled プロパティを使用してコンボボックスを無効にできます。

<igc-combo disabled></igc-combo>

API リファレンス

IgcComboComponent