Autocomplete

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

Angular Autocomplete の例

使用方法

はじめに、app.module で IgxAutocompleteModule と IgxDropDownModule をインポートします。igxAutocomplete を igx-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>

ドロップダウンに表示されるリストを追加します。入力する際にリストをフィルターするには、PipeTransform インターフェイスを使用します。

import { Component, Pipe, PipeTransform } from "@angular/core";

@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" ];
    }
}

@Pipe({ name: "startsWith" })
export class AutocompletePipeStartsWith implements PipeTransform {
    public transform(collection: any[], term = "") {
        return collection.filter((item) => item.toString().toLowerCase().startsWith(term.toString().toLowerCase()));
    }
}
Note

igxAutocomplete は、利用可能なオプションのプロバイダーとして igxDropDown を使用します。これはドロップダウン コンポーネントのすべての機能をオートコンプリートで使用できることを意味します。

Autocomplete の無効化

Autocomplete を無効にするには、IgxAutocompleteDisabled 入力を使用します。

<igx-input-group>
    <input igxInput name="towns" type="text"
        [igxAutocomplete]='townsPanel'
        [igxAutocompleteDisabled]="disabled"/>
    <label igxLabel for="towns">Towns</label>
</igx-input-group>

Autocomplete の設定

igx-autocomplete ドロップダウンの配置、スクロール ストラテジとアウトレットは、IgxAutocompleteSettings を使用して設定できます。

以下の例では、ドロップダウンを入力の上に配置し、開始と終了のアニメーションを無効にします。ConnectedPositioningStrategy を使用します。

<igx-input-group class="autocomplete">
    <label igxLabel for="cinema">Cinema</label>
    <input igxInput name="cinema" type="text"
    [igxAutocomplete]="townsPanel"
    [igxAutocompleteSettings]="settings"/>
</igx-input-group>
<igx-drop-down #townsPanel maxHeight="300px">
    <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>

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

    public towns = [
        {
          name: "New York",
          cinemas: [
            "Regal Cinemas",
            "Village East Cinema",
            "Roxy Cinema",
            "The Paris Theatre"
        ]},
        {
            name: "Los Angeles",
            cinemas: [
                "Arc Light",
                "Pacific Cinerama Dome",
                "New Beverly Cinema",
                "Downtown Independent"
        ]},
        {
            name: "Seattle",
            cinemas: [
                "Central Cinema",
                "Grand Illusion Cinema",
                "Ark Lodge Cinemas",
                "Skyway Outdoor Cinema"
        ]}
    ];
}
Note

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

すべて適切に設定できると、ブラウザーで以下が表示されます。

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

  • 閉じていた場合、上矢印 / 下矢印 または入力を開始すると、ドロップダウンを開きます。
  • 下矢印 - 次のドロップダウン項目へ移動します。
  • 上矢印 - 前のドロップダウン項目へ移動します。
  • ENTER - すでに選択した項目を確定し、ドロップダウンを閉じます。
  • ESC - ドロップダウンを閉じます。
Note

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

互換性サポート

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

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

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

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

スタイル設定

各コンポーネントには独自のテーマがあります。

igxAutocomplete のスタイルを設定するには、それに含まれるコンポーネントのスタイルを設定します。この場合、igx-input-group-theme と igx-drop-down-theme の両方を使用する必要があります。

これら 2 つのコンポーネントのスタイル設定については、igxInputGroup および igxDropdown のスタイル設定セクションを参照してください。

API リファレンス

その他のリソース

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