CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

選択された項目の取得

 MultiAutoCompleteで選択された項目は、selectedItemやselectedItemsプロパティで取得できます。図6のサンプルで説明します。

図6 選択された項目を取得(002-getvalue)
図6 選択された項目を取得(002-getvalue)

 ルートコンポーネントのテンプレートはリスト4のようになります。

リスト4 選択された項目を取得する実装(002-getvalue/src/app/app.component.ts)
<wj-multi-auto-complete
  #multiAutoComplete1     ...(1)
  [itemsSource]="items">
</wj-multi-auto-complete>
<h4>選択された項目</h4>
<ul>
  <li *ngFor="let item of multiAutoComplete1.selectedItems"><!--(2)-->
    {{item}}
  </li>
</ul>
<h4>ドロップダウン選択中の項目</h4>
<div>{{multiAutoComplete1.selectedItem}}</div><!--(3)-->

 (1)では、MultiAutoCompleteに「multiAutoComplete1」と名前を付けて、他の個所から参照できるようにしています。

 MultiAutoCompleteで選択された項目は、selectedItemsプロパティから配列で取得できます。このサンプルでは(2)のように、Angularの*ngForディレクティブでselectedItemsプロパティ配列の各要素を取得して、画面にリスト表示しています。

 一方、selectedItemプロパティは、画面表示されたドロップダウンで選択中の値に対応します。Alt + 上下キーでドロップダウンを表示して、カーソルで項目を選択すると、カーソルが当たっている項目(図6では「softbank」)が(3)の部分に表示されます。

CollectionViewを使って複数の属性を持った項目を表示

 ここまでのサンプルでは、itemsSource属性に単純な配列を設定してきましたが、複数の属性を持ったオブジェクトの配列を、Wijmoが提供するCollectionViewの形式で設定することもできます。キーと名前、証券コードを含むデータのCollectionViewから項目を選択する、図7のサンプルで説明します。

図7 CollectionViewの項目リストから入力(003-collectionview)
図7 CollectionViewの項目リストから入力(003-collectionview)

 まず、項目のデータを表すCollectionViewを生成して、変数itemsに格納します。キーを「key」に、名前を「name」に、証券コードを「security」に、それぞれ設定しています。

リスト5 CollectionViewで項目を定義(003-collectionview/src/app/app.component.ts)
items: CollectionView = new CollectionView([
  { key: "nttdocomo", name: "NTTドコモ", security: "9437" },
  { key: "nttdata", name: "NTTデータ", security: "9613" },
  { key: "kddi", name: "KDDI", security: "9433" },
  { key: "softbank", name: "ソフトバンクグループ", security: "9984" },
  { key: "yahoo", name: "ヤフー", security: "4689" }
]);

 リスト5の内容を表示するテンプレートは、リスト6のようにします。

リスト6 CollectionViewの項目を表示するテンプレート(003-collectionview/src/app/app.component.ts)
<wj-multi-auto-complete
  #multiAutoComplete1
  [itemsSource]="items"                ...(1)
  [displayMemberPath]="'name'"         ...(2)
  [searchMemberPath]="'key,security'"> ...(3)
</wj-multi-auto-complete>
<h4>選択された項目</h4>
<ul>
  <li *ngFor="let item of multiAutoComplete1.selectedItems">
    {{item | json}} <!--(4)-->
  </li>
</ul>

 (1)のitemsSource属性に、CollectionViewの変数itemsを設定します。itemsSource属性には、単純な配列とCollectionViewのどちらも設定できます。

 (2)のdisplayMemberPath属性は、オブジェクト属性のうち、画面に表示するものの名前を設定します。ここでは名前が格納された「name」を設定しています。

 displayMemberPathで設定されたオブジェクト属性は、テキストボックス入力内容との部分一致が自動で行われますが、(3)のsearchMemberPath属性に、部分一致の対象とするオブジェクト属性を追加で設定できます。カンマ区切りで複数設定でき、ここではキー「key」と、証券コード「security」を設定しています。キーや証券コードを入力して候補を表示する操作が実現できます。

図8 証券コードを入力して候補を表示(003-collectionview)
図8 証券コードを入力して候補を表示(003-collectionview)

 なお、itemsSourceにCollectionViewを設定した場合、前述のselectedItemsやselectedItemプロパティには、選択した項目のオブジェクトが設定されます。このサンプルでは、リスト6(4)で、selectedItemsから取得されたデータを、AngularのPipesでJSON文字列に変換して画面表示しています。Pipesについては、Angularの解説記事も参考にしてください。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

バックナンバー

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

もっと読む

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5