[]
ComboBox 컨트롤은 입력 요소와 드롭다운 목록을 결합합니다. 목록에서 문자열이나 개체를 선택 및/또는 편집하는 데 사용할 수 있습니다. 컨트롤은 사용자가 입력할 때 자동으로 항목을 완성하고 사용자가 사용 가능한 항목과 함께 드롭다운 목록을 표시할 수 있게 합니다.
Combobox와 관련된 몇 가지 중요한 속성은 다음과 같습니다:
아래 예시에서는 객체 배열을 사용하고 __displayMemberPath__를 정의하여 ComboBox를 만들고 채웠습니다.
<div id="theComboObject"></div>
import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';
import { getCountries, getData } from './data';
function init() {
// select an item (object)
var theComboObject = new input.ComboBox('#theComboObject', {
displayMemberPath: 'country',
itemsSource: getData()
});
}
사용자는 isEditable 속성을 __True__로 설정한 다음 lostFocus 이벤트를 처리하여 ComboBox itemsSource에 항목을 동적으로 추가할 수 있습니다. 사용자가 itemsSource에 존재하지 않는 값을 입력하고 포커스를 컨트롤에서 멀리 이동하면, lostFocus 이벤트는 입력된 항목을 컨트롤의 itemsSource로 할당된 배열에 추가합니다.
<div id="theCombo"></div>
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.ComboBox('#theCombo', {
itemsSource: countries,
isEditable: true,
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);
}
}
}