select박스에 검색기능 추가하기

처음엔 단순히 html5 에 있는 datalist 태그를 이용하면 된다고 생각했지만 datalist태그는 문제가 있다

검색자체는 가능한데 value 값을 별도로 설정할수가 없다

화면에 표시되는 텍스트가 그대로 value 값이 된다

 

datalist 를 이용한 예제

https://jsfiddle.net/g3otvqyd/

Edit fiddle - JSFiddle - Code Playground

 

실행예제에 있는 결과화면인데 value 값이 표시가 된다

 

원하는 결과는 사과를 선택했을때 value 값을 1이 넘어가는걸 원하므로 이걸로 사용할 순 없고

이럴땐 Chosen 이라는 jquery 라이브러리를 사용하면 된다

별도의 CSS 가 있는 라이브러리기 때문에 주변과 조화가 조금 안된다는;; 점만 감안하면

이만한것도 없는것 같다

 

Chosen 사용 예제

https://jsfiddle.net/j2crt9h8/

Edit fiddle - JSFiddle - Code Playground

 

https://github.com/harvesthq/chosen

GitHub - harvesthq/chosen: Deprecated - Chosen is a library for making long, unwieldy select boxes more friendly.