본문바로가기

Alopex UI

Component

ComboBox

Basic

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>

Attributes

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 박스 클릭 시 텍스트가 모두 선택될지를 지정합니다.
Text 박스를 Click 해보세요 

<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>

Options

$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.

bind

disabled

dynamicdropdown

maxcount

placeholder

position

selectfirst

selecttext

Functions

.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로 가지는 오브젝트를 리턴합니다.
//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}
      • 콤보박스 활성화 여부
<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} 필터링 여부를 리턴합니다.
<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)
<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} 데이터 오브젝트
<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)
<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)에 넣고자 하는 값을 입력합니다.

.setValue(value)

value를 통해 항목을 선택하는 API 입니다.

  • Parameters
    • value {string}
      • 선택하고자 하는 항목의 value 값을 입력합니다.
<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");
});

Events

select

옵션 항목을 선택할 경우 발생하는 이벤트입니다.

  • parameter
    • e {object}
      • jQuery Event Object
    • dataObj {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);
});

본문 상단으로 이동

This Site created with Alopex UI

Icon licensed under CC BY 3.0

Copyright © 2020 SK Holdings C&C. All rights reserved.