Select2插件ajax方式加载数据并刷新页面数据回显

Posted 2021-11-28 hhwww

今天在优化项目当中，有个要在下拉框中搜索数据的需求；最后选择使用selec2进行开发：

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

演示：

准备工作：

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

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

html代码

<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‘}]