select2官网: https://select2.org/
个人建议:先看一下官网文档,等你看了官网之后,就会觉得select2真的很简单。
需求:可搜索的下拉框。layui就有一个搜索下拉框,只要在 select 标签上添加 lay-search 就可以使用了,但是在搜索的时候不知道是卡住了还是怎么回事,有时候需要等一会,有时候需要按一下shirf键,真的是太难用了,也不好看。
索性使用select2插件:
类型:
layui.use('form', function(){
var form = layui.form;
form.render(); //更新全部
$(document).ready(function(){
$("#type").select2({
allowClear: true,
language:'zh-CN',
placeholder:"请选择类型",
ajax:{
url:"/bus/getType.html",
dataType: 'json',
delay: 250,
processResults: function (data, params) {
for (var i = 0; i < data.length; i++) {
//console.log("data="+data[i].id+","+data[i].type);
data[i].id = data[i].id;
data[i].text = data[i].type;
}
return {
results: data
};
},
cache: true
}
});
});
select2 的 value 是 text ,而不是某个变量值,一开始我不知道这个坑,就写了 data[i].type= data[i].type; 搜索下拉框里面的值一直显示空,但是输出整个data又有值,就让人很郁闷。
其次是下拉框的值显示了,但是搜索的时候一直不能根据输入的值进行搜索。代码如下(错误代码):
@ResponseBody//返回json数据给前端
@RequestMapping("/bus/getType")
public List getBus(ModelMap map , HttpServletRequest request, @Valid String type ) {
Page page = bus.findAll(new Specification(){
@Override
public Predicate toPredicate(Root root, CriteriaQuery query,CriteriaBuilder cb){
List list = new ArrayList();
if(!StringUtils.isBlank(type)) {
list.add(cb.like(root.get("type").as(String.class), "%"+type+"%")) ;
}
Predicate[] p = new Predicate[list.size()];
return cb.and(list.toArray(p));
}
},new PageRequest(0, 10, Direction.DESC , "createtime")) ;
List busList = page.getContent();
map.put("type", type);
return busList;
}
花了很多时间去查为什么,大概是因为搜索的时候没有把当前搜索的值传到后台去,但是如何获取当前搜索的值呢?然后又查了很多关于前端获取搜索下拉框的搜索值,还是没有找到想要的。
最后面还是去看了一下select2的使用文档,才知道,原来人家默认就会传当前搜索值过去。真是气自己为什么不一开始就看官方文档,大概还是因为自己英语太菜了吧,看好久还是没看明白,去找中文版的又没讲明白怎么用……
翻译:
So!不需要自己获取select的当前搜索值,人家会自动传一个过去,咱们只要在后台接收就好了。正确代码(前端代码不需要修改):
@ResponseBody//返回json数据给前端
@RequestMapping("/bus/getType")
public List getBus(ModelMap map , HttpServletRequest request, @Valid String q ) {
Page page = bus.findAll(new Specification(){
@Override
public Predicate toPredicate(Root root, CriteriaQuery query,CriteriaBuilder cb){
List list = new ArrayList();
if(!StringUtils.isBlank(q)) {
list.add(cb.like(root.get("type").as(String.class), "%"+q+"%")) ;
}
Predicate[] p = new Predicate[list.size()];
return cb.and(list.toArray(p));
}
},new PageRequest(0, 10, Direction.DESC , "createtime")) ;
List busList = page.getContent();
map.put("type", q);
return busList;
}
(1)通过ajax.data
来传递自定义的参数
(2)把返回参数转换为要求的格式(ajax.processResults
)
(3)延时发送请求 delay: 250
layui.use('form', function(){
var form = layui.form;
form.render(); //更新全部
$(document).ready(function(){
$("#type").select2({
allowClear: true,
language:'zh-CN',
placeholder:"请选择类型",
ajax:{
url:"/bus/getType.html",
dataType: 'json',
delay: 250,
processResults: function (data, params) {
for (var i = 0; i < data.length; i++) {
//console.log("data="+data[i].id+","+data[i].type);
data[i].id = data[i].id;
data[i].text = data[i].type;
}
return {
results: data
};
},
cache: true
}
});
});
$('#mySelect2').select2({
ajax: {
url: 'https://api.github.com/search/repositories',
data: function (params) {
var query = {
search: params.term,
page: params.page || 1
}
// Query parameters will be ?search=[term]&page=[page]
return query;
}
}
});
在返回结果中需要包括:
"pagination": {
"more": true
}
通过more的ture/false来告诉select2是否有更多结果。
如果返回结果中不直接包含more,也可以通过processResults,结合其他信息进一步计算出more的值,比如说返回了总数据量和当前页码的情况下:
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.results,
pagination: {
more: (params.page * 10) < data.count_filtered
}
};
}
如果请求的url不是固定的,或者需要通过一个方法来判断到底请求哪个url:
$('#mySelect2').select2({
ajax: {
url: function (params) {
return '/some/url/' + params.term;
}
}
});
参考链接:https://blog.csdn.net/fukaiit/java/article/details/81750755
存一下:https://www.520mwx.com/view/67866
https://www.cnblogs.com/liuxiaobo93/p/5112993.html