Angular Autocomplete (オートコンプリート) ディレクティブ の概要

Angular Autocomplete は、入力中に候補のリストから項目を簡単に検索、フィルタリング、および選択できるようにする検索ボックス ディレクティブです。機能が豊富で、シームレスなデータ バインディング、フィルタリング、グループ化、UI カスタマイズ オプション、およびその他の組み込み機能をサポートしているため、直感的なオートコンプリート検索エクスペリエンスを作成できます。

Angular Autocomplete の例

以下の Angular Autocomplete の例では、ユーザーが入力テキスト ボックスに町の名前を入力し始めると、ドロップダウンの候補リストが生成されます。

Ignite UI for Angular Autocomplete を使用した作業の開始

Ignite UI for Angular の Angular コンポーネント と Autocomplete ディレクティブを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

はじめに、app.module で IgxAutocompleteModule と IgxDropDownModule をインポートします。igxAutocomplete が igxInput に適用される場合、igxInputGroupModule も必要です。

// app.module.ts

...
import { IgxAutocompleteModule, IgxDropDownModule } from 'igniteui-angular/drop-down';
import { IgxInputGroupModule } from 'igniteui-angular/input-group';
// import { IgxAutocompleteModule, IgxDropDownModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package

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

あるいは、16.0.0 以降、IgxAutocompleteDirective をスタンドアロンのディレクティブとしてインポートできます。

// home.component.ts

...
import { IgxAutocompleteDirective, IGX_DROP_DOWN_DIRECTIVES } from 'igniteui-angular/drop-down';
import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
// import { IgxAutocompleteDirective, IGX_INPUT_GROUP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <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>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxAutocompleteDirective, IGX_INPUT_GROUP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES]
})
export class HomeComponent {}

Ignite UI for Angular Action Strip モジュールまたはディレクティブをインポートしたので、igxAutocomplete コンポーネントの基本構成を開始できます。

Angular Autocomplete の使用

オートコンプリート機能を入力に適用するには、ドロップダウンを参照して 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()));
    }
}

Angular Autocomplete の無効化

Angular 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 を使用して設定できます。

以下の Angular Autocomplete 例では、ドロップダウンを入力の上に配置し、開始と終了のアニメーションを無効にします。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'
        ]}
    ];
}

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

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

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

また、WYSIWYG App Builder™ が、実際の Angular コンポーネントを使用して、デザインからコード作成までのストーリー全体を 80% 効率化する方法を確認することもできます。

互換性サポート

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 コンポーネント コンテナーに適用されます。

The drop-down component, used as provider for suggestions, will expose the following ARIA attributes:

• role=“listbox” - applied on the igx-drop-down component container
• role=“group” - applied on the igx-drop-down-item-group component container
• role=“option” - applied on the igx-drop-down-item component container
• aria-disabled=“true”/“false” applied on igx-drop-down-item, igx-drop-down-item-group component containers when they are disabled.

スタイル設定

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

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

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

API リファレンス

• IgxAutocompleteDirective
• DropDown
• InputGroup

テーマの依存関係

• IgxDropDown テーマ
• IgxInputGroup テーマ

その他のリソース

• IgxDropDown
• IgxInputGroup
• テンプレート駆動フォームの統合

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)