검색 가능한 콤보박스 적용하기

아래 그림과 같이 <select> 태그에  bootstrap-select 라이브러리를 이용한 콤보박스에서 검색 기능을 적용하는 방법

 

JQuery v1.9.1 이상을 필요로 하며 아래 css 와 js 추가한다. 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

그리고 아래와 같이 select 태그에  'selectpicker'  클래스를 추가하면 된다.

<select class="selectpicker form-control col-6" id="workAreaId" name="workAreaId" onchange="doSubmit('AREA');" data-live-search="true">
    <option value="0">- 지역사업소 -</option>
    <option th:each="val : ${AREA_LIST}"
            th:value="${val?.getPKey()}"
            th:selected="${DASHBOARD.workAreaId == val.getPKey()}"
            th:utext="${val?.getAreaName()}"></option>
</select>

그리고 디자인은 /bootstrap-select.min.css 파일의 내용을 적절히 수정하여 조정하면 됨.

검색 결과가 없는 경우 메세지가 영문으노 No results matched. 로 표시된다.

아래와 같이 스크립트 상단에 메세지를 변경 정의 한다.

$.fn.selectpicker.Constructor.DEFAULTS.noneResultsText = '검색 결과가 없습니다.';