由于服务器压力,如果数据多 会造成服务器卡顿 下拉搜索如何变成远程搜索来解决服务器压力 这就可以使用select2
先标明select2官网:
https://select2.org/
html
<select id="import-select2" multiple="multiple" ></select>
select2与一般的select的数据有差异,它需要特定的格式
,官方的数据结构如下:
js
引入js
<link rel="stylesheet" type="text/css" href="/bootstrap/plugins/select2/select2.min.css">
<script src="/bootstrap/plugins/select2/select2.js"></script>
// 初始化select2
$("#import-select2").select2({
placeholder: '请搜索联系人',
multiple:true, //是否多选
language : BW8i18n.getLocale() === 'en_US' ? 'en-US' : 'zh-CN',
allowClear:false,
closeOnSelect:close,
tokenSeparators:[ ',' ,'' ], //数组类型
ajax:{
type:'POST',
url:'.../.../url', //这里是接口地址
delay: 250,
dataType:'json',
//params 接口传入的值
data: function (params) {
return {
contactorName: params.term, //当前搜索框里面的值
limit:100,
offset:0
};
},
// 如果后端返回的数据不是官方结构 通过processResults 来变成官方结构
processResults: function (data) {
var newlist = []
var list = data.rows
for(var i=0;i<list.length;i++){
newlist.push({
id:list[i].cId,
text:list[i]._companyName?list[i]._companyName+'|'+list[i].realName+'('+list[i].cId+')':list[i].realName+'('+list[i].cId+')'
})
}
//正确的返回格式
return {
results: newlist
};
},
}
});