Autocomplete

igxAutocomplete ディレクティブは igxDropDown と候補オプションを表示してテキスト入力を向上する方法を提供します。候補は、テキスト入力の開始時、または 上矢印/下矢印` キーを使用して表示します。

デフォルトで最初の項目が常にハイライトされ、キーを使用して簡単に選択できる方法を提供します。リストの項目をクリックして選択することもでき、入力値が自動的に更新されてドロップダウンが閉じられます。項目が選択されると、onItemSelected イベントが発生します。イベントがキャンセルされると項目は選択されずにドロップダウンも閉じません。igxAutocomplete ディレクティブは項目間を移動すると同時に入力が常にフォーカスされます。後者では入力を続行できます。ESC キーが使用してドロップダウン リストを閉じます。

igx-autocomplete は、使用可能なオプションのプロバイダーとして igx-drop-down を使用します。つまり、使用可能なグループ化、テンプレート、項目とグループの無効化を含むドロップダウン コンポーネントの機能が使用されます。

デモ

以下のサンプルは、igx-input に適用される igx-autocomplete ディレクティブの簡単な使用方法を示します。ディレクティブは、定義したフィルタリング パイプのある igx-drop-down とともに提供されます。

Warning

Ignite UI for Angular コンポーネントをプロジェクトに追加する前に、必要なすべての依存関係を構成し、プロジェクトのセットアップが正しく完了したことを確認してください。手順は、はじめにのトピックをご確認ください。

使用方法

はじめに

igx-autocomplete を使用するには、app.moduleIgxAutocompleteModuleIgxDropDownModule をインポートする必要があります。igx-autocompleteigx-input に適用した場合は、igxInputGroupModule も必要となります。

// app.module.ts

...
import { 
    IgxAutocompleteModule,
    IgxDropDownModule, 
    IgxInputGroupModule 
} from 'igniteui-angular';

@NgModule({
    ...
    imports: [
        ..., 
        IgxAutocompleteModule,
        IgxDropDownModule,
        IgxInputGroupModule,
        ....
    ],
    ...
})
export class AppModule {}

ドロップダウンの参照となる igxAutocomplete ディレクティブと値を追加します。

<igx-input-group>
    <input igxInput name="towns" type="text"
        [igxAutocomplete]='townsPanel'/>
    <label igxLabel for="towns">Towns</label>
</igx-input-group>
<igx-drop-down #townsPanel>
    <igx-drop-down-item *ngFor="let town of towns">
        {{town}}
    </igx-drop-down-item>
</igx-drop-down>
@Component({
    selector: 'app-autocomplete-sample',
    styleUrls: ['autocomplete.sample.css'],
    templateUrl: `autocomplete.sample.html`
})
export class AutocompleteSampleComponent {
    constructor() {
        this.towns = [ "New York", "Washington, D.C.", "London", "Berlin", "Sofia", "Rome", "Kiev",
            "Copenhagen", "Paris", "Barcelona", "Vienna", "Athens", "Dublin", "Yerevan",
            "Oslo", "Helsinki", "Stockholm", "Prague", "Istanbul", "El Paso", "Florence", "Moscow" ];
    }
}

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

  • ドロップダウンが閉じている場合、Arrow DownArrow UpAlt + Arrow DownAlt + Arrow Up はドロップダウンを開きます。
  • ドロップダウンが閉じている場合、入力フィールドに入力するとドロップダウンが開きます。
  • Arrow Down - 開いている場合、次のドロップダウン項目へ移動します。
  • Arrow Up - 開いている場合、以前のドロップダウン項目へ移動します。
  • Enter は、すでに選択した項目を確定し、ドロップダウンを閉じます。
  • Esc はドロップダウンを閉じます。

注: オートコンプリートが開いたときにリストの最初の項目が自動的に選択されます。リストがフィルターされたときも同様です。

互換性サポート

igxAutocomplete ディレクティブを適用すると要素を以下の ARIA 属性で装飾します。

  • role="combobox" - ディレクティブが適用される要素のロール。
  • aria-autocomplete="list" - 入力完了の候補がリストのフォームに適用されたことを示します。
  • aria-haspopup="listbox" は、igxAutocomplete が値を提案するコンテナをポップアップできることを示すための属性です。
  • aria-expanded="true"/"false" - ドロップダウンの縮小状態に基づいた値。
  • aria-owns="dropDownID" - ドロップダウンの id は候補を表示するために使用されます。
  • aria-activedescendant="listItemId" - 値が現在のアクティブリスト要素の id に設定されます。

候補に使用される drop-down コンポーネントは、以下の ARIA 属性を公開します。

  • role="listbox" - igx-drop-down コンポーネント カレンダーに適用されます。
  • role="group" -igx-drop-down-item-group コンポーネント コンテナに適用されます。
  • role="オプション" - igx-drop-down -itemコンポーネント コンテナに適用されます。
  • Igx-drop-down-item に適用される aria-disabled="true"/"false」、無効な場合の igx-drop-down-item-group コンポーネント コンテナ。

オートコンプリート ドロップダウンを有効/無効にします。

以下のサンプルは、IgxAutocompleteDisabled を定義し、オートコンプリート ドロップダウンの有効か無効化を許可します。

<igx-input-group>
    <input igxInput name="towns" type="text"
        [igxAutocomplete]='townsPanel'
        [igxAutocompleteDisabled]="disabled"/>
    <label igxLabel for="towns">Towns</label>
</igx-input-group>
<igx-drop-down #townsPanel>
    <igx-drop-down-item *ngFor="let town of towns">
        {{town}}
    </igx-drop-down-item>
</igx-drop-down>
<igx-switch name="toggle" [(ngModel)]="!disabled"></igx-switch>
@Component({
    selector: 'app-autocomplete-sample',
    styleUrls: ['autocomplete.sample.css'],
    templateUrl: `autocomplete.sample.html`
})
export class AutocompleteSampleComponent {
    disabled;
    constructor() {
        this.towns = [ "New York", "Washington, D.C.", "London", "Berlin", "Sofia", "Rome", "Kiev",
            "Copenhagen", "Paris", "Barcelona", "Vienna", "Athens", "Dublin", "Yerevan",
            "Oslo", "Helsinki", "Stockholm", "Prague", "Istanbul", "El Paso", "Florence", "Moscow" ];
    }
}

ドロップダウンの設定

igx-autocomplete ドロップダウンの配置、スクロール ストラテジとアウトレットは、IgxAutocompleteSettings オプションを使用して設定できます。タイプ AutocompleteOverlaySettings からの値を許可します。

以下の例は、ディレクティブが適用される入力の上部に設定可能なドロップダウンの位置を表示します。更に開く、閉じるのアニメーションを無効にします。ConnectedPositioningStrategy が使用されます。

<igx-input-group #inputGroup>
    <input igxInput name="towns" type="text"
        [igxAutocomplete]='townsPanel'
        [igxAutocompleteSettings]='settings'/>
    <label igxLabel for="towns">Towns</label>
</igx-input-group>
<igx-drop-down #townsPanel>
    <igx-drop-down-item *ngFor="let town of towns">
        {{town}}
    </igx-drop-down-item>
</igx-drop-down>
@Component({
    selector: 'app-autocomplete-sample',
    styleUrls: ['autocomplete.sample.css'],
    templateUrl: `autocomplete.sample.html`
})
export class AutocompleteSampleComponent {
    constructor() {
        this.towns = [ "New York", "Washington, D.C.", "London", "Berlin", "Sofia", "Rome", "Kiev",
            "Copenhagen", "Paris", "Barcelona", "Vienna", "Athens", "Dublin", "Yerevan",
            "Oslo", "Helsinki", "Stockholm", "Prague", "Istanbul", "El Paso", "Florence", "Moscow" ];
    }
    @ViewChild('inputGroup', { read: IgxInputGroupComponent }) inputGroup: IgxInputGroupComponent;

    this.settings = {
        positionStrategy: new ConnectedPositioningStrategy({
            closeAnimation: null,
            openAnimation: null,
            verticalDirection: VerticalAlignment.Top,
            verticalStartPoint: VerticalAlignment.Top
        })
    };
}

注: デフォルトの配置ストラテジは、空きスペースに基づいて AutoPositionStrategy とドロップダウンが開きます。

アプリケーション シナリオ

Reactive From 内でグループ化した igxAutocomplete

以下のサンプルは、オートコンプリートで映画が city でグループ化されている cinema の選択が可能なリストです。インプットの入力または Arrow Down キーを使用してリストを開き、cinema を選択します。次に movie と日付を選択します。

上記サンプルのようにグループで igxAutocomplete を使用するには、以下の方法でデータを定義する必要があります。

<igx-input-group>
    <input igxInput #cinema name="cinema" formControlName="cinema" [igxAutocomplete]='cinemaPanel'/>
    <label igxLabel for="cinema">City & Cinema</label>
    <igx-suffix igxRipple><igx-icon fontSet="material">place</igx-icon> </igx-suffix>
</igx-input-group>
<igx-drop-down #cinemaPanel maxHeight="350px">
    <igx-drop-down-item-group *ngFor="let town of towns" [label]="town.name">
        <igx-drop-down-item *ngFor="let cinema of town.cinemas" [value]="cinema">
            {{cinema}}
        </igx-drop-down-item>
    </igx-drop-down-item-group>
</igx-drop-down>

オートコンプリートをリモートデータにバインド

以下は、リモートサービスにバインドされたドロップダウンと igxAutocomplete のサンプルです。サービスへのリクエストを制限してパフォーマンスを向上させるために、RxJS debounce を使用し、入力が終わった 250ms 後にリクエストします。

サンプルでドロップダウンの代わりにカスタムの読み込みテンプレートを適用しているため、表示時にデータの読み込みで遅延が発生します。

API

既知の問題

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。