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){
             //
        });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值