datalist速度慢，可使用select2加载

1.最近遇到一个需求，在地图上面增加一个搜索功能，大概流程就是这样：

每一次点击下拉选择框的内容，下拉的样式固定不变，而地图则跳转至该灯杆的所在的经纬度信息，这样

第一次用datalist加载慢，第二次用了select2一次性加载了全部数据也不太好，最后是用分页解决，类似于懒加载
好了，废话不多说，直接上代码

//这里主要写后台的接收参数的格式
public DataGridView loadAllJ00002ForMap(String activityName, Integer page, Integer pageSize)

//前端
<select class="ajaxGetData" style="width:250px;">
   <option></option>
</select>

<!--导入select2插件-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css" />

 $('.ajaxGetData').select2({
            placeholder: '搜索灯杆',
            language: "zh-CN",
            minimumInputLength: 1, // 最少输入N个字符才开始检索
            ajax:{
                url: '',
                type: "post",
                dataType: 'json',
                data: function(params) {
                    // 传入后台的参数
                    var data = {
                        // 搜索框内输入的内容
                        activityName: params.term,
                        // 当前页
                        page: params.page || 1,
                        // 每页显示多少条记录，默认10条
                        pageSize: 10
                    };
                    return data;
                },
                processResults: function (data, params) {
                    var result = data.data
                    params.page = params.page || 1;
                    console.log(params.page)
                    var resultData = [];
                    // 如果没有查找的数据的时候 直接返回一空
                    if (result.length<=0) {
                        return {
                            results: resultData
                        };
                    } else {
                        for (var i = 0; i < result.length; i++) {
                            resultData.push({'id': result[i].id, 'text': result[i].field1});
                        }
                    }
                    return {
                        // 最终返回结果集
                        results: resultData,
                        // 当我的结果集  等于我每页数量大小的时候，就说明 我还有下一页 pagination 是开启滚动也分
                        pagination: {
                            more: (params.page * 10) < data.count

                        }
                    };
                }
            },
            closeOnSelect: false, //下拉数据不管怎么选择都固定
            allowClear:true, //开启清除
            cache:false, 
            escapeMarkup: function (markup) {
                // 字符转义处理
                return markup;
            }
        });

以下就是点击每一条杠的事件

    $(".ajaxGetData").on("select2:select",function(e){
             //
        });