select2插件使用小记

Posted 2020-09-15 ESnail

　　页面引入：

// 页面顶部
<link rel="stylesheet" type="text/css" href="css/select2.min.css">

// 页面底部
// 依赖jQuery，引入jQuery之后，还需引入以下js文件
<script type="text/javascript" src="js/select2/select2.full.min.js"></script>
<script type="text/javascript" src="js/select2/lang/zh-CN.js"></script>

　　调用select2

var util = {
    //模糊匹配
    select2: function(options){
        select2(options);

        //将输入的值作为其值
        var inputAsValue = function($target, value){
            var id = "select2-" + $target.attr("id") + "-container";
            $("#advertiser_name_input").val(value).keyup();
            $("#"+id).text(value);
        };

        function select2(arg) {
            var requireName = arg.requireName;
            arg.target.select2({
                placeholder:arg.placeholder, // 文本框的提示信息
                language: ‘zh-CN‘,
　　             minimumInputLength: 2, // 至少输入n个字符，才去加载数据
                maximumInputLength: 100, // 限制最大字符，以防坑

 

                data: options.data,
                ajax: {
                    url: arg.url,
                    dataType: ‘json‘,
                    method: ‘post‘,
                    quietMillis:100,
                    delay: 250,
                    data: function (params) {
                        var data = {}, id;
                        data[arg.requireName] = params.term; // 查询的关键字
                        // data[‘page‘] = params.page;
                        return $.extend(true, data, arg[‘other‘]);
                    },
                    processResults: function (result, params) {
　　　　　　　　　　　　// params.page = params.page || 1;
                        if(result && result.flag && !$.isEmptyObject(result.data)){
                            var resultData = result.data,
                                selectData = [], selectObj = {};
                            for(var i=0,len=resultData.length; i<len; i++){
                                selectObj = {
                                    ‘id‘: resultData[i][‘id‘] || ‘‘,
                                    ‘text‘: resultData[i][‘name‘] || ‘‘,
                                    ‘industry_id‘: resultData[i][‘industry_id‘] || ‘‘
                                };
                                selectData.push(selectObj);
                            }
                            return {
                               /* pagination: {
                                    more: (params.page * 30) < 100 //data.total_count
                                },*/
                                results: selectData
                            };
                        }else{
                            var noData = [
                                    {id:0,text:‘暂无数据‘}
                                ];
                            return {
                                results:noData
                            };
                        }
                    },
                    cache: true
                },
                escapeMarkup: function (markup) { return markup; },
                minimumInputLength: 1
            });
            arg.target.on("change", function(e){
                options.change && options.change();
            });
        }
    }
};

// 调用
pageFun.select2({
    target: $(‘#select‘),
    url: pageInfo.activityNameUrl,
    requireName: ‘key‘,
    callback: ‘‘,
    data: {‘id‘, 11},
    change: function(){
        var $select = $(‘#select‘);
        var data = $select.select2("data")[0]; 
        // 其余操作
    }
});

　　注意：注释的代码可以实现第一次只显示30（若总条数>30）,鼠标拖动滚动条往下滚时，再去请求再显示30条的效果；但是会重复显示之前的30条数据。

　　设置默认值或回填值：

 if(selectId !=‘‘){
      $("#select").html(‘<option value="‘+selectId +‘">‘+selectVal+‘</option>‘).trigger(‘change‘);
 }

　　显示全部：

名称：<select class="select-w100 select2" name="select" id="select">
          <option value="">全部</option>
     </select>