select box 플러그인 Select2

select box의 옵션 항목을 검색할 수 있는 기능을 제공하는 플러그인으로 select2를 사용해 보았다.

 

 

1. 먼저 공식 홈페이지에서 js, css 파일을 다운로드하여 직접 스크립트를 추가해 주었다.

 

https://select2.org/

Getting Started | Select2 - The jQuery replacement for select boxes

 

 

2. 옵션 항목은 ajax로 가져온 다음 select2의 data 세팅값으로 넣어주었다.

var list = [];

$.ajax({
    url: '/list.do',
    type: 'POST',
    async: false,
    success: function(data){
        var getList = data.list;
        var obj;
        $.each(getList, function(i) {
            obj = {"name":getList[i].name, "text":getList[i].name + " (" + getList[i].desc + ")" };
            list.push(obj);
        })
    }
})

$("#list").select2({
    data: list
})

 

 

 

3. 옵션 선택 시 필요한 기능을 추가해 주었다.

$("#list").on('select2:select', function(e){
    if (e.params.data.text == "-") {
        document.getElementById("info").style.display = "none";
    } else {
        var data = e.params.data;
        infoShow(data.id, data.desc, data.use);
    }
})