ComboBox 개요
ComboBox 컨트롤은 입력 요소와 드롭다운 목록을 결합합니다. 목록에서 문자열이나 개체를 선택 및/또는 편집하는 데 사용할 수 있습니다. 컨트롤은 사용자가 입력할 때 자동으로 항목을 완성하고 사용자가 사용 가능한 항목과 함께 드롭다운 목록을 표시할 수 있게 합니다.
Combobox와 관련된 몇 가지 중요한 속성은 다음과 같습니다:
itemsSource : 문자열 또는 객체가 될 수 있는 항목 목록을 채웁니다.
displayMemberPath: 항목이 객체인 경우, 목록에 표시되는 항목의 속성을 지정합니다.
selectedValuePath: 콤보박스의 selectedValue 속성을 설정하는 데 사용되는 항목의 속성을 정의합니다.
selectedIndex: 현재 선택된 항목의 인덱스를 결정합니다.
text: 현재 선택된 항목의 텍스트를 결정합니다.
isRequired: 컨트롤의 내용을 삭제하여 컨트롤 값을 null로 설정할 수 있는지의 여부를 결정합니다. 값이 null로 설정되면 __selectedIndex__는 -1로 설정됩니다.
isEditable: 사용자가 목록에 없는 값을 입력할 수 있는지의 여부를 결정합니다.
아래 예시에서는 객체 배열을 사용하고 __displayMemberPath__를 정의하여 ComboBox를 만들고 채웠습니다.
HTML
<div id="theComboObject"></div>Javascript
import * as wijmo from '@mescius/wijmo';
import * as input from '@mescius/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로 할당된 배열에 추가합니다.
HTML
<div id="theCombo"></div>Javascript
import * as wijmo from '@mescius/wijmo';
import * as input from '@mescius/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);
}
}
}ComboBox 컨트롤은 다음과 같은 키보드 명령을 지원합니다:
입력 요소(Input element)에서 작동하는 키 조합
키 조합 | 동작 |
|---|---|
↓(아래 화살표) | 드롭다운을 열지 않고 현재 값을 다음 옵션 값으로 변경합니다. |
↑(위 화살표) | 드롭다운을 열지 않고 현재 값을 이전 옵션 값으로 변경합니다. |
Alt + ↓ / Alt + ↑ | 드롭다운 목록을 엽니다. |
입력 가능한 문자 | 입력한 텍스트를 포함하는 항목을 검색합니다. |
※ WCAG 표준을 더 잘 준수하기 위해, KeyAction을 사용하여 위/아래 화살표 키의 동작을 수정할 수 있습니다.
import * as input from '@mescius/wijmo.input';
new input.ComboBox('#theCombo', {
keyActionDownArrow: input.KeyAction.OpenDropdown // 아래 화살표 키 입력 시 드롭다운 목록 열기
});드롭다운 목록(Dropdown list)에서 작동하는 키 조합
키 조합 | 동작 |
|---|---|
Enter | 현재 선택된 옵션의 값으로 변경하고 드롭다운을 닫습니다. |
Escape | 드롭다운을 닫습니다. |
↓(아래 화살표) | 다음 옵션으로 이동하고 값을 변경합니다. |
↑(위 화살표) | 이전 옵션으로 이동하고 값을 변경합니다. |
Alt + ↑ | 현재 선택된 옵션의 값으로 변경하고 드롭다운을 닫습니다. |
Page Up | 위로 10개 항목 이동합니다. |
Page Down | 아래로 10개 항목 이동합니다. |
Ask ChatGPT