select2的使用(ajax获取数据)

最近项目中用到了select2来做下拉框,数据都是通过ajax从后台获取, 支持动态搜索等。

使用到的下拉框分有两种情况:

一种是直接发送ajax请求渲染列表;另一种因为查询回的数据有六万多条,导致整个页面卡顿,所以采用的是先让用户至少输入3个字以后再动态模糊查询数据。

基本的使用方法看官方文档就可以明白,但是在做模糊查询的时候遇到了一些问题,在此记录一下。

第一种情况的下拉框,先是封装了函数获取数据,并拼接了列表模版,然后设置templateSelection即可。

function getProvinceList(ele) {
        var proList = ‘<option value="-1">--省--</option>‘
        $.ajax({
            type:‘get‘,
            contentType:‘application/json;charset=utf-8‘,
            url: dicUrl + ‘queryTwoLayerAddress‘,
            dataType:‘json‘,
            success: function(res) {
                if(status == 00) {
                    var resArr = res.data
                    for( var i = 0; i < resArr.length; i++) {
                        proList += ‘<option value = ‘+ resArr[i].code +‘>‘+ resArr[i].codeText +‘</option>‘
                    }
                    ele.html(proList)
                }
            }
        })
    }

$(‘#addrProvince‘).select2({


language: localLang,


placeholder:‘请选择省份‘,


templateSelection:  getProvinceList($(‘#addrProvince‘))


})

 

第二种做法则是按照文档里的做法,初始化select框后再发送ajax请求.

$(‘#bankName‘).select2({
        minimumInputLength:3,
        id: function(data) {     //把[{id:1, text:"a"}] 转换成[{data.id:1, data.codeText:"a"}], 因为后台返回的数据是[{id:1, codeText:"a"}]
            return data.id
        },
       // text: function(data) {return data.codeText},   //不生效
        formatSelection: function (data) { return data.codeText },  //生效
        ajax: {
            type:‘get‘,
            url: function(params){
                return dicUrl + ‘query/bankCode/‘+ params.term
            },
            dataType:‘json‘,
            data: function(params) { //输入的内容
                return {
                    text:params.term,
                }
            },
            processResults: function (data, page) {
                //data = { results:[{ItemId:1,ItemText:"a"},{ItemId:2,ItemText:"b"}] };
                    var array = data.data;
                    var i = 0;
                    while(i < array.length){
                            array[i]["id"] = array[i][‘code‘];
                            array[i]["text"] = array[i][‘codeText‘];
                            delete array[i]["ItemId"];
                            delete array[i]["ItemText"];
                    i++;
                    }
                    return { results: array };
                },
            cache: true,
        },
        placeholder:‘请选择银行名称‘,
        escapeMarkup: function(markup) { //提示语
            return markup
        },
        templateResult: formatRepo,
        templateSelection: formatRepoSelection
    });

    function formatRepo (repo) {
        if (repo.loading) {
            return repo.text;
        }
        var markup = "<div class=‘select2-result-repository clearfix‘>" +
            "<div class=‘select2-result-repository__meta‘>" +
                "<div class=‘select2-result-repository__title‘>" + repo.codeText + "</div>";
        if (repo.description) {
            markup += "<div class=‘select2-result-repository__description‘>" + repo.description + "</div>";
        }
        return markup;
    }

    function formatRepoSelection (repo) {
        return repo.text;
    }
 

select2.js 默认的ajax.results 返回的数据结构是 [{id:1,text:"a"},{id:2,text:"b"}, ...].

select2.js

//source code* @param options.results a function(remoteData, pageNumber, query) that converts data returned form the remote request to the format expected by Select2.
*      The expected format is an object containing the following keys:
*      results array of objects that will be used as choices
*      more (optional) boolean indicating whether there are more results available
*      Example: {results:[{id:1, text:‘Red‘},{id:2, text:‘Blue‘}], more:true}
源码中在ajax的success函数中回调ajax.results
//source codesuccess: function (data) {
     // TODO - replace query.page with query so users have access to term, page, etc.
     // added query as third paramter to keep backwards compatibility
     var results = options.results(data, query.page, query);
     query.callback(results);
}

其实ajax.results是把请求回的数据在传递给query.callback之前先格式化成 [{id:a,text:"a"},{id:b,text:"b"}, ...]。

//source codecallback: this.bind(function (data) {

                    // ignore a response if the select2 has been closed before it was received
                    if (!self.opened()) return;

                    self.opts.populateResults.call(this, results, data.results, {term: term, page: page, context:context});
                    self.postprocessResults(data, false, false);

                    if (data.more===true) {
                        more.detach().appendTo(results).html(self.opts.escapeMarkup(evaluate(self.opts.formatLoadMore, self.opts.element, page+1)));
                        window.setTimeout(function() { self.loadMoreIfNeeded(); }, 10);
                    } else {
                        more.remove();
                    }
                    self.positionDropdown();
                    self.resultsPage = page;
                    self.context = data.context;
                    this.opts.element.trigger({ type: "select2-loaded", items: data });
                })});

query.callback则处理一些逻辑,确保下拉框选项被选中时触发 .selectChoice。

//source codeselectChoice: function (choice) {

            var selected = this.container.find(".select2-search-choice-focus");
            if (selected.length && choice && choice[0] == selected[0]) {

            } else {
                if (selected.length) {
                    this.opts.element.trigger("choice-deselected", selected);
                }
                selected.removeClass("select2-search-choice-focus");
                if (choice && choice.length) {
                    this.close();
                    choice.addClass("select2-search-choice-focus");
                    this.opts.element.trigger("choice-selected", choice);
                }
            }
        } 

因此,如果results格式错误,就会导致在执行.selectChoice的时候.select2-search-choice-focus不能被添加到DOM元素上(会导致点击选项以后,选项并不会被选中)

解决方案:

results: function (data, page) {
  //data = { results:[{ItemId:1,ItemText:"a"},{ItemId:2,ItemText:"b"}] };
    var array = data.results;
    var i = 0;
    while(i < array.length){
        array[i]["id"] = array[i][‘ItemId‘];
        array[i]["text"] = array[i][‘ItemText‘];
        delete array[i]["ItemId"];
        delete array[i]["ItemText"];
    i++;
    }
    return { results: array };
  }

  

也可以手动更改对象的属性名.

select.js是这么处理的的

//source codeid: function (e) { return e == undefined ? null : e.id; },
    text: function (e) {
      if (e && this.data && this.data.text) {
        if ($.isFunction(this.data.text)) {
          return this.data.text(e);
        } else {
          return e[this.data.text];
        }
      } else {
        return e.text;
      }
    },

所以,我们只要添加函数就可以覆盖默认的对象属性名了。

$(‘#mySelect‘).select2({
  id: function (item) { return item.ItemId },
  // text: function (item) { return item.ItemText }, //not work  formatSelection: function (item) { return item.ItemText } //works
});

  

另一个遇到的问题就是语言本地化。

发现直接引入语言包并不生效,所以直接使用函数改写了提示语言。

var localLang = {

noResults: function() {

return ‘未找到匹配选项‘

},

inputTooShort: function (args) {

var remainingChars = args.minimum - args.input.length;

var message = ‘请输入‘ + remainingChars + ‘个或更多文字‘;

return message;

},

searching: function () {

return ‘搜索中…‘;

}

}

$(‘#select2‘).select2({

language: localLang,

})

  



select2的使用(ajax获取数据)

原文地址:https://www.cnblogs.com/deadbug/p/10088544.html

时间: 2024-11-10 18:23:46

select2的使用(ajax获取数据)的相关文章

Ajax获取数据后append追加到表格内出现格式混乱的错误

Ajax获取数据后append追加到表格内出现追加的数据与表格风格不同的错误: $("#courierTable").append("<tr style='text-align: center'> class='tab-content'") $("#courierTable").append("<tr style='text-align: center'> class='tab-content'") $

vue 中使用 AJAX获取数据的方法

在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp"; var _self=this; $.get(url,function(data){ _se

jquery通过ajax获取数据,控制显示的数据条数

效果图: 现在我们可以先看它的json数据,如图所示:                然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据需求隐掉列数据. <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> html,body {

用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库

小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢nodejs路由和Ajax之间的数据传输,也就是表单提交,然后在用nodejs把数据写入mysql数据库 用到的东西比较多,但是还是很有趣的 1.安装node.js 安装node.js,直接去官网下载然后根据需求点击下一步就好了 Node.js安装包及源码下载地址为:https://nodejs.org

Ajax 获取数据代码

无刷新获取字符串: Html网页中: <script> //定义异步对象 var xmlHttp; //封装方法 function CreateXMLHTTP() {   try {            xmlHttp = new XMLHttpRequest();        } catch (e) {  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");      } } window.onload = functio

JQuery Ajax 获取数据

前台页面:   对一张进行查询,删除,添加 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src=

jquery 之ajax获取数据

$.ajax({    url: "http://www.hzhuti.com",    //请求的url地址    dataType: "json",   //返回格式为json cache:false,//第二次请求是否读取缓存    async: true, //请求是否异步,默认为异步,这也是ajax重要特性    data: { "id": "value" },    //参数值    type: "GET

AJAX获取数据成功后的返回数据如何声明成全局变量

var result=""; $.ajax({ type: "post", url: "../reportRule/main.do?method=selectReportToAdd", data:{}, success: function(msg){ result = msg; alert(result );\\有数据 } }); alert(result)\\无数据 原因: ajax是异步请求,即javascript是非阻塞运行的,在$.aja

vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全

https://segmentfault.com/q/1010000005618139 点击提交,发送请求.但是api:123用于加密的参数,直接暴露了.右键源代码就可以看到 <body> <div class="row"> <div class="col-md-4 col-md-offset-4"> <table class="table table-bordered" id="content