コンボボックス：概要

ComboBoxコントロールは、入力要素とドロップダウンリストを組み合わせたコントロールです。これを使用して、リストから文字列やオブジェクトを選択したり編集することができます。このコントロールは、ユーザーのキー入力に伴って自動的にエントリを補完し、利用可能な項目をドロップダウンリストに表示することができます。

次に、ComboBoxに関連する重要なプロパティを示します。

• itemsSource：項目（文字列またはオブジェクト）のリストを挿入します。
• displayMemberPath：項目がオブジェクトの場合に、項目のどのプロパティをリストに表示するかを指定します。
• selectedValuePath：項目のどのプロパティを使用してComboBoxのselectedValueプロパティを設定するかを定義します。
• selectedIndex：現在の選択項目のインデックスを決定します。
• text：現在の選択項目のテキストを決定します。
• isRequired：コントロールの内容を削除して、コントロールの値をnullに設定できるようにするかどうかを決定します。値がnullに設定されると、selectedIndexは-1に設定されます。
• isEditable：ユーザーがリストにない値を入力できるようにするかどうかを決定します。

次の例では、オブジェクト配列を使用し、displayMemberPathを定義して、コンボボックスを作成し、項目を挿入しています。

HTML

<div id="theComboObject"></div>

JavaScript

import * as wijmo from '@mescius/wijmo';
import * as input from '@mescius/wijmo.input';
import { getCountries, getData } from './data';

function init() {
    // 項目（オブジェクト）を選択します
    var theComboObject = new input.ComboBox('#theComboObject', {
        displayMemberPath: 'country',
        itemsSource: getData()
    });    
}

項目を自動的に追加する

ユーザーがComboBox itemsSourceに項目を動的に追加できるようにするには、isEditableプロパティをTrueに設定し、lostFocusイベントを処理します。ユーザーがitemsSourceに存在しない値を入力し、コントロールからフォーカスを移動すると、lostFocusイベントにより、入力した項目がコントロールのitemsSourceとして割り当てられている配列にすぐに付加されます。

HTML

<div id="theCombo"></div>

JavaScript

import * as wijmo from '@mescius/wijmo';
import * as input from '@mescius/wijmo.input';

function init() {
    let countries = new wijmo.ObservableArray(['アメリカ', 'ドイツ', 'イギリス', '日本', 'イタリア', 'ギリシャ']);
    //
    new input.ComboBox('#theCombo', {
        itemsSource: countries,
        isEditable: true,
        lostFocus: lostFocus
    });

    // コントロールがフォーカスを失うと、リストに項目が追加されます
    function lostFocus(sender) {
        let item = sender.text;
        if (item && countries.indexOf(item) < 0) {
            countries.push(item);
        }
    }
}