select 박스를 자유로게 하자 select2 라이브러리 사용

select 박스를 자유로게 하자

AutoComplete 를 지원하는 select 확장 플러그인

select2 특징으로는 

자동완성(AutoComplete)과 AJAX를 이용한 원격 데이터 불러오기가 가능합니다.

자동완성의 경우 한글은 문자 단위부터 가능하며 초성은 지원되지 않습니다.

jQuery 기반의 플러그인으로 jQuery가 필수이고 Bootstrap 테마를 지원합니다.

라이브러리 로드는 아래와 같이 import 해서 사용하시면 됩니다.

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>

기본사용법은 

<script type="text/javascript">
    $(document).ready(function() {
        var airlineCode = [{"id": 1,"text": "Option 1"},{"id": 2,"text": "Option 2","selected": true},{"id": 3,"text": "Option 3","disabled": true}]
 
        $("#rp_airlinecd").select2({
            placeholder: 'Select an option',
            templateResult: formatState,
            closeOnSelect: true,
            allowClear: true,
            data: airlineCode
 
        });
    });
 
    function formatState (state) {
        if (!state.id) {
            return state.text;
        }
        var baseUrl = "http://xxx.com/erp/zones/images/air";
        var $state = $(
                '<span><img width="13" src="' + baseUrl + '/' + state.element.value.toUpperCase() + '.gif" class="img-flag" /> ' + state.text + '</span>'
        );
        return $state;
    };
</script>
 
<select name="rp_airlinecd" id="rp_airlinecd" class="form-control isNotNull" data-value="<?php echo @$_POST['rp_type']?>">
    <option value="">선택</option>
</select>

참고 url : https://select2.org/