Select2에서 Adapter를 4.0 부터 지원하기 시작했다.
Select2에서 Adapter를 사용하게 되면 할수 있는일 중에 select2에 보여줄 내용을 ajax를 통해서 조회를 한다고 하면,
한번 조회한 내용은 저장했다가 저장된 내용으로 보여 줄수 있다는 것이다.
또한 Adapter를 사용하다 보니 좀더 유연하게 기능 구현을 할수 있을거라 본다.
처음에 select2공식 사이트에 나와 있는내용만 보고는 무슨 소리인가 했는데, select2.full.js를 얼어 보고나서 Android에서 RecyclerView를 가지고 List를 구현하기 위해 사용하는 Adapter를 생각하니까 좀 쉽게 이해가 됬다.(adapter를 사용하기 위해서는 select2.full.js 또는 select2.full.min.js를 사용해야 된다.)
(관련 예제나 소스가 많이 없어서 고생 했...내가 못찾은 것일수도...검색도 능력이라는데...ㅠㅠ)
우선 기본적으로 ajax를 사용하는 select2 초기화 소스를 보면,
$(".select2").select2({
minimumResultsForSearch: Infinity,
dropdownAutoWidth : true,
placeholder: "선택하세요.",
language: "ko",
ajax: {
url: 'https://api.github.com/search/repositories',
dataType: 'json'
// Additional AJAX parameters go here; see the end of this chapter for the full code of this example
}
});
이렇게 되어 있는데, Adapter를 사용하게 되면 몇개 더 추가를 해줘야 한다.
일단 펑션을 하나 만들자.
/**
* select2 Adapter 초기화
*/
function initAdapter(){
$.fn.select2.amd.define('select2/data/select2Adapter', ['select2/data/array', 'select2/utils'],
function (ArrayAdapter, Utils) {
function CustomDataAdapter ($element, options) {
CustomDataAdapter.__super__.constructor.call(this, $element, options);
}
Utils.Extend(CustomDataAdapter, ArrayAdapter);
let data = {results: []}; // 서버에서 조회한 값을 가지고 있을 Object
CustomDataAdapter.prototype.query = function (params, callback) {
if(data.results.length == 0){
$.ajax({
url: "../../common/selectData",
dataType: "json",
data: function(){
param1: 1111,
param2: 2222,
},
success: function(result){
let selectList = result.data.selectList;
for(let i = 0; i < smKindList.length; i++){
let selectItem = selectList[i];
selectItem.id = selectItem.smKindSeq;
selectItem.text = selectItem.smKindName;
data.results[i] = selectItem;
}
},
error: function (request, status, error){
}
});
}
callback(data);
};
CustomDataAdapter.prototype.destroy = function () {
// Can be implemented in subclasses
console.log("CustomDataAdapter.prototype.destroy");
data = {results: []};
};
return CustomDataAdapter;
}
);
}
이렇게 Adapter를 만들었으면 select2를 바인딩 하는 펑션을 하나 더 만들자...
function bindSelect2(){
initAdapter(); //-- select2를 바인딩 하기 전에 먼저 선언해야 된다.
let selectAdapter = $.fn.select2.amd.require('select2/data/select2Adapter'); // adapter 의 define 첫번째 파라미터 값.
$( ".select2").select2({
minimumResultsForSearch: Infinity,
dropdownAutoWidth : true,
placeholder: "선택하세요.",
language: "ko",
dataAdapter: selectAdapter
});
}
끝!!!