Select2插件ajax方式加載數據並刷新頁面數據回顯

今天在優化項目當中，有個要在下拉框中搜索數據的需求；最后選擇使用selec2進行開發：

官網：http://select2.github.io/

演示：

准備工作：

　　文件需要引入select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上

       注意：最新版本的select2如果引用的jquery版本較低的話，某些功能無法正常使用。

HTML代碼

 

//在線引入select2

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select id="c01-select" class="select2" name="search" style="width:200px"></select>

數據要求

var  data = [{ id: 0, text:  'enhancement'  }, { id: 1, text:  'bug'  }, { id: 2, text:  'duplicate'  }, { id: 3, text:  'invalid'  }, { id: 4, text:  'wontfix'  }];

JS代碼

$(function () {
            var select2 = $("#c01-select").select2({
                 ajax: {
                 url: "URL",
                 dataType: 'json',
                 delay: 250,
                 data: function (params) {
                     return { eps400: params.term };
                 },
                 processResults: function (data) {
                     return {
                            results: data  //必須賦值給results並且必須返回一個obj，否則會報錯；
                          };
                 },
                 cache: true
                 },
                 escapeMarkup: function (markup) { return markup; }, 
                 minimumInputLength: 1,
                 placeholder: '請選擇',
            })

　　　　　　//用於數據回顯
            var search = "${param.search}";//后台搜索或者編輯返回的數據
            if('' != search){
                $("#c01-select").append(new Option(search, search, false, true));//第一個參數時id,第二個參數是text
                $("#c01-select").trigger("change");
            }
        })

說明：

     1.q: params.term 查詢參數（params.term表示輸入框中內容，q發生到服務器的參數名；所以這里你可以添加自定義參數，如：stype:'person'）

     2.processResults中results: data返回數據（返回最終數據給results，如果我的數據在data.res下，則返回data.res。這個與服務器返回json有關）

     3.minimumInputLength 最小需要輸入多少個字符才進行查詢，與之相關的maximumSelectionLength表示最大輸入限制。

     4.escapeMarkup字符轉義處理

     5.templateResult返回結果回調function formatRepo(repo){return repo.text},這樣就可以將返回結果的的text顯示到下拉框里，當然你可以return repo.text+"1";等

     6.templateSelection選中項回調function formatRepoSelection(repo){return repo.text}

     7.關於返回的 json的格式：select2默認json格式為[{id:1,text:'text'},{id:2,text:'text'}]，新版嚴格要求這樣的格式，當然你可以添加列，如：[{id:1,text:'text',name:'liu'}]