select2 下拉加载 分页数据

这篇博文

http://www.php.cn/js-tutorial-384637.html

注释写的比较详细, （不过他做了很多修改）

https://blog.csdn.net/bossxu_/article/details/80368471  这个也可以看看

首先，页面上引入jquery，和select2

<link rel="stylesheet" type="text/css" href="../../select2-v4.0.6/css/select2.min.css"/>
<script src="../../jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<script src="../../select2-v4.0.6/js/select2.min.js" charset="utf-8"></script>
<script src="../../select2-v4.0.6/js/i18n/zh-CN.js" charset="utf-8"></script>

页面上写好select

<select class="js-example-basic-single content-input" name="circleId"  id="circleId"></select>

js

//获取url中的参数
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg); //匹配目标参数
    if (r != null) return unescape(r[2]); return null; //返回参数值
}
var userId = getUrlParam('userId')
$('#circleId').select2({
    placeholder: '请选择圈子',
    language: "zh-CN",
    // data:[{ id: employeeId, text: partmentName}],  //  默认值填写  value 是id  text:是名字 不能使用其他字段
    // inputMessage:'信息科',
    ajax: {
        url: options["url"],
        type: "post",
        dataType: "json",
        delay: 250,
        headers: {
            apikey: sessionStorage.getItem('apikey') || 'test'
        },
        data: function(params){
            // 传递到后端的参数
            return {
                // 搜索框内输入的内容
                // selectInput: params.term,
                // 当前页
                // page: params.page || 0,
                // 每页显示多少条记录，默认10条
                // row: 10,
                cmd: cmd,
                data: JSON.stringify({
                            isJoin: 2,
                            page: params.page || 0,
                            row: 10,
                            userId: userId,
                            keyWord: params.term
                        }), 
            };
        },
        
        processResults: function (data, params) {
            params.page = params.page || 0;
            var d_l = data.data;

            return {
                results: d_l,
                pagination: {
                    more: (params.page) < data.total
                }
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) {
        return markup;
    },
    templateResult: function (repo) {
        if (repo.loading) {
            return repo.text;
        } else {
            return repo.circleName;      //选中 显示的名称
        }

    },
    templateSelection: function (data) {
        return data.circleName||data.text;
    }
});