5.20232.939
5.20232.939

자동 완성(AutoComplete) 필터링

AutoComplete 컨트롤은 사용자 입력과 일치하는 항목만 표시하기 위해 소스 collectionView 필터링을 제어합니다.

필터를 컨트롤 하려면 itemsSource 속성을 필터링된 CollectionView의 항목 속성으로 설정하십시오. AutoComplete는 내부에서의 사용을 위한 새 CollectionView를 만들고, CollectionView의 원래 필터링이 유지됩니다.

아래 예시에서 AutoComplete는 필터링된 CollectionView를 itemsSource로 사용합니다. 필터는 사용자 유형으로 항목을 검색하는 동안 활성 상태로 유지됩니다.

HTML
 <div id="theAutoComplete"></div>
Javascript
import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';
import { getData } from './data';

function init() {
    // create a filtered CollectionView to use as a data source
    let view = new wijmo.CollectionView(getData(), {
        filter: theFilterFunction
        });

    // create the AutoComplete using the CollectionView's items as a source
    let theAutoComplete = new input.AutoComplete('#theAutoComplete', {
        displayMemberPath: 'country',
        itemsSource: view.items
        });

    // our filter function
    function theFilterFunction(item) {
        return item.popk > 50000;
        }   

}