chosen 라이브러리를 이용해 셀렉트박스에 검색기능 집어넣기

셀렉트박스에 나오는 데이터를 간단하게 검색할 수 있는 기능을 찾다가 발견한 jquery 라이브러리 chosen입니다. 셀렉트박스 데이터 검색 및 원하는 value 값을 선택 할 수 있는 기능 등 제가 원하는 기능을 다 가지고 있어서 마음에 드네요.

Chosen 다운로드 링크

간단한 사용법

html태그의 아이디나 클래스 이름을 jquery로 선택하고 뒤에 .chosen() 을 붙여주면 즉시 사용 가능합니다. (jquery 라이브러리 이므로 jquery도 선언되어 있어야 합니다) 

이때 옵션을 넣어줄 수 있는데 저는 특별한게 필요하지 않아서 검색결과가 없을때와 가로 사이즈만 지정해 넣어줬습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<select id="test">
  <option value="">옵션을 선택하세요</option>
  <option value="test1">test1</option>
  <option value="test2">test2</option>
  <option value="test3">test3</option>
</select>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script>
$('#test').chosen({
  no_results_text: '검색 결과가 없습니다'
  , width: '300px'
});
</script>

chosen으로 검색기능이 들어 간 selectbox 모습입니다

특정 value값을 선택한 상태로 변경하기

검색 기능이 들어 간 selectbox 지만 버튼을 누르면 특정 값을 선택해 그 값으로 선택 된 상태를 변경할 수 있습니다.

2번 선택 버튼을 누르면 option value값이 test2 인 값을 선택합니다

test2 값이 선택 된 모습

변경 코드는 간단하게 2번 선택이라고 써있는 button 을 누르면 select박스 id를 jquery로 선택하고 지정 할 값을 선택 후 .trigger('chosen:updated') 를 넣어주면 됩니다.

참고로 .trigger는 라이브러리에 포함된 함수명이기 때문에 새창을 띄워서 부모창의 데이터를 변경하려고 할 때 .trigger를 호출하면 먹히지 않습니다. 그럴 땐 별도의 함수를 하나 만들고 새창에서 부모창의 이 함수를 호출 할 때 .trigger를 호출하도록 만들어야 합니다.

<select id="test">
  <option value="">옵션을 선택하세요</option>
  <option value="test1">test1</option>
  <option value="test2">test2</option>
  <option value="test3">test3</option>
</select>

<button id="testSelect">2번 선택</button>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script>
$('#test').chosen({
  no_results_text: '검색 결과가 없습니다'
  , width: '300px'
});

$('#testSelect').click(function(){
	$('#test').val('test2').trigger("chosen:updated");
});
</script>

jsfiddle 예제

위 내용을 간단하게 jsfiddle로 만들어본 예제 링크입니다.

jsfiddle 예제 링크