Component
ComboBox
ComboBox는 텍스트 입력에 따른 옵션이 필터링되어 보여지는 셀렉트 컴포넌트 입니다. class="Combobox"
<select class="Combobox">
<option value="korea">Korea</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
<option value="china">China</option>
</select>
data-bind
Select 컴포넌트와 동일한 방식으로 데이터바인딩이 가능합니다.
data-bind-option 을 통해 value,text 속성의 value , text 로 지정되는 키명을 커스텀하게 설정할 수도 있습니다.
참고: Select 컴포넌트의 data-bind-option
<select class="Combobox" id="comboboxDatabind"
data-bind-option="people:country"
data-bind="options:data, selectedOptions: option_selected">
</select>
$('#comboboxDatabind').setData({
data: [{people:"한국인", country:"KOREA" },
{people:"일본인", country:"JAPAN" },
{people:"미국인", country:"USA"},
{people:"중국인", country:"CHINA"}],
option_selected: '중국인'
});
data-disabled
- Type: {boolean}
- 'false' (default) : 마크업으로 콤보박스를 비활성화
<select class="Combobox" data-disabled="true">
<option value="korea">Korea</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
<option value="china">China</option>
</select>
data-dynamic-dropdown
목록으로 보여지는 데이터 목록을 동적으로 생성하고자 할 때 사용합니다.
상위 엘리먼트 영역에 의해 데이터 목록이 가려지는 경우에 사용합니다.
- "true"
- 목록이 열리는 시점에 document.body 영역에 데이터 목록 객체가 생성되고, close 되는 시점에 삭제됩니다.
- selector
- 목록이 열리는 시점에 데이터 목록 객체를 생성하여 추가할 영역 엘리먼트의 selector을 지정합니다.
- ex) data-dynamic-dropdown="#divId"
<select class="Combobox" data-dynamic-dropdown="true">
<option value="korea">Korea</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
<option value="china">China</option>
</select>
data-max-count
- Type: {number}
- 필터링된 내용의 높이를 갯수로 설정합니다.
<select class="Combobox" data-max-count="5">
<option value="korea">Korea</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
<option value="china">China</option>
<option value="england">England</option>
<option value="brazil">Brazil</option>
<option value="canada">Canada</option>
</select>
data-placeholder
- Type: {string}
- 'default' (default) : 콤보박스의 입력 칸의 placeholder을 설정합니다.
<select class="Combobox" data-placeholder="선택">
<option value="korea">Korea</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
<option value="china">China</option>
</select>
data-position
- Type: {string}
- "top", "bottom(default)"
- dropdown의 위치를 설정합니다.
<select class="Combobox" data-position="top">
<option value="korea">Korea</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
<option value="china">China</option>
</select>
data-select-first
- Type: {boolean}
- 'false' (default) : 입력창에서 Enter 키 입력 시 첫번째 항목이 선택되는 옵션을 설정합니다.
<select class="Combobox" data-select-first="true" data-placeholder="Enter키입력">
<option value="korea">Korea</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
<option value="china">China</option>
</select>
data-select-text
- Type: {boolean}
- false (default)
- Text 박스 클릭 시 텍스트가 모두 선택될지를 지정합니다.
<select class="Combobox" data-select-text="true">
<option value="korea">Korea</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
<option value="china">China</option>
</select>
$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.
bind
- data-bind 참고
disabled
dynamicdropdown
maxcount
placeholder
position
selectfirst
selecttext
.close()
Combobox 컴포넌트를 동적으로 닫을 때 사용하는 함수입니다.
<select id="comboclose" class="Combobox" data-placeholder="선택">
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="candy">candy</option>
<option value="dog">dog</option>
</select>
<a id="btn_close_mouseover" class="Button">마우스를 올려보세요</a>
$('#btn_close_mouseover').on("mouseover", function(){
$('#comboclose').close();
});
.getOptions()
Combobox에 설정된 옵션값을 모두 가져올 수 있습니다.
- Return {object}
- object
- Combobox에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.
- object
//Combobox에 설정된 모든옵션값을 가져옵니다.
$('#Combobox').getOptions();
.getText()
선택된 셀렉트 아이템의 텍스트를 가져오는 API입니다.
- Return {string}
- 선택한 아이템의 텍스트를 return하여 줍니다.
.getValue()
선택된 셀렉트 아이템의 value를 가져오는 API입니다.
- Return {string}
- 선택한 아이템의 value를 return하여 줍니다.
- 선택된 값이 없는 경우에는 ""(빈 스트링)이 리턴됩니다.
.selectionInit()
- 콤보박스의 초기값으로 설정합니다.
- data-placeholder 옵션을 사용한 경우, 텍스트는 빈값("")으로 placeholder 이 보여집니다.
- selected 옵션을 사용한 경우, 해당 항목이 선택됩니다.
- 위의 경우가 아니면 첫번째 옵션 항목이 선택됩니다.
<select id="selectioninit" class="Combobox" data-placeholder="선택">
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="candy">candy</option>
<option value="dog">dog</option>
</select>
<button class="Button" id="btn_selectioninit">selectionInit()</button>
$('#selectioninit').setValue("candy");
$('#btn_selectioninit').on("click", function(){
$(selectioninit).selectionInit();
});
.setEnabled(enabled)
콤보박스 활성화 여부를 설정합니다.
- Parameters
- enabled {boolean}
- 콤보박스 활성화 여부
- enabled {boolean}
<select id="setenabled" class="Combobox" data-placeholder="선택" data-disabled="true">
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="candy">candy</option>
<option value="dog">dog</option>
</select>
<button class="Button" id="btn_setenabled_true">setEnabled(true)</button>
<button class="Button" id="btn_setenabled_false">setEnabled(false)</button>
$('#btn_setenabled_true').on("click", function(){
$('#setenabled').setEnabled(true);
});
$('#btn_setenabled_false').on("click", function(){
$('#setenabled').setEnabled(false);
});
.setOptions(options)
콤보박스의 옵션을 동적으로 설정할 때 사용하는 API 입니다.
Options에 정의되어 있는 옵션을 설정할 수 있습니다.
- filter
- Type: {function}
- 기본 필터링 기능을 사용하지 않고, Custom filtering 을 하고자 할 경우 사용합니다.
- function(optionEl, text)
- optionEl {element} 비교할 옵션 엘리먼트
- text {string} 입력된 텍스트 값
- return
- {boolean} 필터링 여부를 리턴합니다.
- Type: {function}
<select id="setoptions_filter" class="Combobox" data-placeholder="1~4숫자입력">
<option value="1">first item</option>
<option value="2">second item</option>
<option value="3">third item</option>
<option value="4">fourth item</option>
</select>
$('#setoptions_filter').setOptions({
filter: function(optionEl, text){
// value 값과 일치하도록 필터링 수행
if(text === optionEl.value){
return true;
}
return false;
}
});
- filtertype
- Type: {object}
- 텍스트 입력에 따른 옵션 필터링에 대한 세부 옵션을 설정합니다.
- filter 옵션을 지정할 경우에 filtertype 옵션은 무시됩니다.
- ignorewhitespace
- 필터링 시 공백을 포함 여부를 설정합니다.
- true (default)
- ignorecase
- 필터링 시 대소문자를 구분 여부를 설정합니다.
- true (default)
- startswith
- 입력 텍스트로 시작하는 항목들만 필터링하여 보여줍니다.
- false (default)
- endswith
- 입력 텍스트로 끝나는 항목들만 필터링하여 보여줍니다.
- false (default)
- Type: {object}
<select id="setoptions_filtertype" class="Combobox" data-placeholder="'abc' 입력">
<option value="abc">abc</option>
<option value="abcd">abcd</option>
<option value="aabc">aabc</option>
<option value="aabcd">aabcd</option>
</select>
$('#setoptions_filtertype').setOptions({
filtertype:{
ignorewhitespace: true,
ignorecase: false,
startswith: true,
endswith: false
}
});
- formatter
- Type: {function}
- 옵션 항목을 커스텀 형식으로 만들고자 할 경우 사용합니다.
- function(dataObj)
- dataObj {object} 데이터 오브젝트
- Type: {function}
<select id="setoptions_formatter" class="Combobox" data-placeholder="선택" >
<option value="add" selected>add</option>
<option value="delete">delete</option>
<option value="edit">edit</option>
</select>
$('#setoptions_formatter').setOptions({
formatter : function(dataObj){
var html = '';
switch(dataObj.value){
case "add":
html += '<span class="Icon Plus"></span> '
break;
case "delete":
html += '<span class="Icon Minus"></span> '
break;
case "edit":
html += '<span class="Icon Edit"></span> '
break;
default:
break;
}
return html + dataObj.text;
}
});
- selectfirst
- Type: {boolean}
- 입력창에서 Enter 키를 누르면 첫번째 항목이 선택됩니다.
- false (default)
- Type: {boolean}
<select id="setoptions_selectfirst" class="Combobox" data-placeholder="선택" >
<option value="korea">Korea</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
<option value="china">China</option>
</select>
<button class="Button" id="btnselectfirst">setOption({selectfirst:true})</button>
<button class="Button" id="btnselectfirst_false">setOption({selectfirst:false})</button>
$('#btnselectfirst_true').on("click", function(e){
$('#setoptions_selectfirst').setOptions({
selectfirst: true
});
});
$('#btnselectfirst_false').on("click", function(e){
$('#setoptions_selectfirst').setOptions({
selectfirst: false
});
});
.setText(text)
입력(Input)의 텍스트 값을 동적으로 변경합니다.
- Parameters
- text {string}
- 텍스트 박스(Input)에 넣고자 하는 값을 입력합니다.
- text {string}
.setValue(value)
value를 통해 항목을 선택하는 API 입니다.
- Parameters
- value {string}
- 선택하고자 하는 항목의 value 값을 입력합니다.
- value {string}
<select id="getValTxt" class="Combobox">
<option value="value1">Korea</option>
<option value="value2">USA</option>
<option value="value3">Japan</option>
<option value="value4">China</option>
</select>
<button id="btn_getVal" class="Button">getValue</button>
<button id="btn_getTxt" class="Button">getText</button>
<button id="btn_setVal" class="Button">setValue("value3")</button>
<button id="btn_setTxt" class="Button">setText("Japan")</button>
$('#btn_getVal').on("click", function(e){
alert("getValue : "+ $('#getValTxt').getValue());
});
$('#btn_getTxt').on("click", function(e){
alert("getText : "+ $('#getValTxt').getText());
});
$('#btn_setVal').on("click", function(e){
alert("setValue('value3')");
$('#getValTxt').setValue("value3");
});
$('#btn_setTxt').on("click", function(e){
alert("setText('Japan')");
$('#getValTxt').setText("Japan");
});
select
옵션 항목을 선택할 경우 발생하는 이벤트입니다.
- parameter
- e {object}
- jQuery Event Object
- dataObj {object}
- 선택한 옵션의 데이터 오브젝트
- e {object}
<select class="Combobox" id="events_select">
<option value="korea">Korea</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
<option value="china">China</option>
</select>
$('#events_select').on("select", function(e, dataObj){
alert("value : "+ dataObj.value +", text : "+dataObj.text);
});