select2使用最新总结，原创

我直白但是很详细

$("#checkuserL").select2({     //checkuserL  为文本框或者 div的id
tags : true,   //将Select2放入“标签'mode,用户可以添加新的选择和预先存在的标签是通过提供 这个选项的属性是一个 数组 或者一个 函数 返回一个 数组的 对象 或 字符串 。 如果 字符串 而不是使用 对象 他们将有一个被转换成一个对象 id 和 文本 属性相等 的值 字符串 。
multiple : true,   //Select2是否允许选择多个值  (重要)
height: '150px',   //框的高度
language: "zh-CN",  //中文标志
separator:",",   //分隔符字符或字符串用来划定id
minimumInputLength:1,  // 输入框中输入最小长度的字符触发模糊搜索功能
allowClear: true,//允许清空
SetdRowsx:10,
ajax: {   　　//用于请求后台的ajax   ,(如果访问后台时，前台可能会出现弹窗错误状态码，原因：后台后台数据错误  1：后台必须是和前台对应的(后台)JSONArray数组  [{"id":id,"text":text}])  ,很重要
url: "${ctx}/check/checkUser",  //请求后台的路径
dataType: 'json',   //从后台接收的数据类型
delay: 250,      //延迟时间  （单位毫秒）
data: function (params) {
return {
params   （与后台接收数据的参数对应） : params
};
},
results: function (data) {
return {
results: data
};
},
cache: false  //是否有缓存
},
formatAjaxError:function(){

layer.alert("加载失败");
},
escapeMarkup: function (markup) { return markup; },
formatSelection : function formatRepo(repo) { //选中一个后返回值
$("#checkuserL").val(repo.text);
return repo.id;
},
formatResult: function formatRepoSelection(repo) { //返回所有内容到下拉框
return repo.id;       //搜索后下拉框对应的数据  （注：根据后台返回数据一一对应）
},
initSelection: function (element, callback) { // 初始化时设置默认值
var id = $(element).val()==null?"请选择":$(element).val();
var text = $("#checkuserL").val()==null?"0":$("#checkuserL").val(); //把text的值传给input
var data = { id: id, text: text};//这里是初始化的数据，你可以通过id来从服务器上获取（ajax），再装载进去
callback(data);
}
});

 

后台代码：

@RequestMapping("/checkUser")
public @ResponseBody JSONArray findUnit(String params) {
String st = "";
List<User> list = userService.findUserLikeName(params);

if (list != null) {
st = "[";// 构造json
for (User user : list) {

st += "{id: '" + user.getName() + "',text: '" + user.getId() + "'}";
}
st += "]";
}
JSONArray json = JSONArray.parseArray(st);
return json;
}

希望能帮到更对人，踩过坑，摔醒人！！！

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有