jquery select (drop down list) option 검색 - jquery chosen

drop down list가 많이 나오면 찾기 힘들다.

그래서 drop down list에 검색이 나오게 하면 찾을 수 있어서 좋다.

jQuery Chosen 플러그인을 사용하면 쉽게 할 수 있다.

<link rel="stylesheet" href="<c:url value='/chosen/chosen.min.css'/">

<script src="<c:url value='/chosen/chosen.jqeury.min.js'/"></script>

<div id="chosen2">

<select id="deptSelect" name="deptCode" style="width:150px; display:none" class="chosen-select pull-right">

<option value=""></option>

</select>

</div>

<script type="text/javascript">

server("/depts",null,initDeptSelect);

function initDeptSelect(data){

var $option=$("#chosen2").find('option').detach();

if(data.success=='true'){

(function(temp,temp2,index){

$('#deptSelect').each(function(){

if(index==0){

$(this).append($option.clone());

$(this).append($option.clone().val(null).text('<spring:message code="system.entire"/>'));

}

$(this).append($option.clone().val(temp1).text(temp2));

})

})(this.deptCode, this.deptNm, index)

});

}

$("#deptSelect').chosen({

placeholder_text_single:'<spring:message code="system.select_department"/>',

inherit_select_class:true

});

}

</script>