オートコンプリート：フィルター

AutoCompleteコントロールは、ソースCollectionViewのフィルター処理を制御して、ユーザー入力と一致する項目のみを表示します。

独自にフィルターを管理するには、itemsSourceプロパティを、独自にフィルター処理したCollectionViewのitemsプロパティに設定します。AutoCompleteは、内部的に使用する新しいCollectionViewを作成し、元のCollectionViewのフィルター処理は維持されます。

次の例のAutoCompleteは、フィルター処理されたCollectionViewをitemsSourceとして使用しています。ユーザー入力に応じて項目が検索されますが、フィルターはアクティブなままです。

HTML

 <div id="theAutoComplete"></div>

JavaScript

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

function init() {
    // データソースとして使用するフィルター処理されたCollectionViewを作成します
    let view = new wijmo.CollectionView(getData(), {
        filter: theFilterFunction
    });

    // そのCollectionViewの項目をソースとして使用するAutoCompleteを作成します
    let theAutoComplete = new input.AutoComplete('#theAutoComplete', {
        displayMemberPath: 'country',
        itemsSource: view.items
    });

    // フィルター関数
    function theFilterFunction(item) {
        return item.popk > 50000;
    }

}