「Wijmo（ウィジモ） 5」のMultiAutoCompleteコントロールで複数項目を素早く選択

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第12回

はじめてのMultiAutoComplete

　最初に、MultiAutoCompleteの基本的な実装と画面操作方法を、図3のサンプルで説明します。

図3　MultiAutoCompleteの表示（001-basic）

MultiAutoCompleteの基本的な実装

　MultiAutoCompleteを利用するには、まず、ルートモジュール定義ファイルapp.module.tsで、Angular用のMultiAutoComplete（WjMultiAutoCompleteクラス）を含むモジュールWjInputModuleを読み込みます。

リスト1　MultiAutoCompleteのモジュール設定（001-basic/src/app/app.module.ts）

import { WjInputModule } from "wijmo/wijmo.angular2.input";
（略）
@NgModule({
  imports:      [ BrowserModule, WjInputModule ],

　ルートコンポーネントファイルapp.component.tsでは、リスト2のように、WjMultiAutoCompleteクラスに対応する<wj-multi-auto-complete>タグをテンプレートに記述します。

リスト2　テンプレートにMultiAutoCompleteを記述（001-basic/src/app/app.component.ts）

<wj-multi-auto-complete
  [itemsSource]="items"> ...（1）
</wj-multi-auto-complete>

　リスト2（1）のitemsSource属性に、表示する項目が格納された配列の変数名を設定します。ここで設定した「items」は、コンポーネントにリスト3のように記述します。

リスト3　表示する項目の配列（001-basic/src/app/app.component.ts）

items = [
  "nttdocomo",
  "ntteast",
（略）
];

MultiAutoCompleteの操作方法

　MultiAutoCompleteのテキストボックスに文字列を入力すると、部分一致する項目がリスト表示されるので、リストから選択して入力できます。

図4　入力文字列に一致する候補を表示（001-basic）

　フォーカスが当たっている状態でAlt + 上下キーを押下すると、すべての項目をドロップダウン表示して選択することもできます。

図5　すべての項目をドロップダウン表示（001-basic）

　MultiAutoCompleteは、キーボードショートカットで効率よく操作できるように設計されています。サポートされているショートカットを表2に示します。

表2　MultiAutoCompleteのキーボードショートカット

ショートカット	動作
Space、F4、Alt + 上下	ドロップダウンリストを表示
上下	ドロップダウンリストを表示せずに前後の項目を表示
Enter	ドロップダウンリストを閉じて項目を追加
Tab	ドロップダウンリストを閉じずに項目を追加
Esc	項目を追加せずにドロップダウンリストを閉じる
左右	すでに入力されている項目を選択
BackSpace、Delete	選択した項目を削除