자동 완성(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;
		}	
		
}