[]
AutoComplete 컨트롤은 입력 컨트롤로, 사용자가 입력할 때 제안 드롭다운 리스트에서 선택할 수 있습니다. 기능 및 아키텍처 관점에서 ComboBox 컨트롤을 확장하여 다음의 두 가지 추가 기능을 제공합니다:
AutoComplete 컨트롤은 itemsSource 속성을 사용하는 항목으로 채워집니다.
아래 예제에서는 AutoComplete 컨트롤을 만들고 'countries' 배열을 사용하여 이를 채웁니다. 사용자 유형에 따라, AutoComplete는 국가를 검색하고 현재 입력에 따라 리스트를 좁힙니다.
<label for="theAutoComplete">AutoComplete:</label>
<br/>
<div id="theAutoComplete"></div>
import * as input from '@grapecity/wijmo.input';
import { getData } from './data';
function init() {
let theAutoComplete = new input.AutoComplete('#theAutoComplete', {
displayMemberPath: 'country',
itemsSource: getData()
});
}
사용자는 isEditable 속성을 __True__로 설정하고 lostFocus 이벤트를 처리하여 AutoComplete itemsSource에 항목을 동적으로 추가할 수 있습니다. 사용자가 itemsSource에 없는 값을 입력하고 포커스를 컨트롤에서 멀리 이동하면, lostFocus 이벤트는 입력된 항목을 컨트롤의 itemsSource로 할당된 배열에 추가합니다.
import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';
function init() {
let countries = new wijmo.ObservableArray(['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']);
new input.AutoComplete('#theAutoComplete', {
itemsSource: countries,
lostFocus: lostFocus
});
// add item to the list when a control loses focus
function lostFocus(sender) {
let item = sender.text;
if (item && countries.indexOf(item) < 0) {
countries.push(item);
}
}
}