搜索下拉框（select2插件）学习与使用：为什么select2搜索无效

select2官网： https://select2.org/

个人建议：先看一下官网文档，等你看了官网之后，就会觉得select2真的很简单。

需求：可搜索的下拉框。layui就有一个搜索下拉框，只要在 select 标签上添加 lay-search 就可以使用了，但是在搜索的时候不知道是卡住了还是怎么回事，有时候需要等一会，有时候需要按一下shirf键，真的是太难用了，也不好看。

索性使用select2插件：

HTML：

<td>类型：</td>
<td>
    <select name="type" id="type" lay-ignore class="layui-input layui-unselect" style="width: 100%">
        <option value="">请选择类型</option>
        <#if busList??>
        <#list busList as bus>
        <option value="${bus.id!''}" <#if bus.id  == type>selected="selected"</#if>>${bus.name}</option>
        </#list>
        </#if>
    </select>
</td>

jQuery:

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<Bus>  getBus(ModelMap map , HttpServletRequest request, @Valid String type ) {
    Page<Bus> page = bus.findAll(new Specification<Bus>(){
        @Override
        public Predicate toPredicate(Root<Bus> root, CriteriaQuery<?> query,CriteriaBuilder cb){
            List<Predicate> list = new ArrayList<Predicate>();
            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<Bus> busList = page.getContent();
    map.put("type", type);
    return busList;
}

花了很多时间去查为什么，大概是因为搜索的时候没有把当前搜索的值传到后台去，但是如何获取当前搜索的值呢？然后又查了很多关于前端获取搜索下拉框的搜索值，还是没有找到想要的。

最后面还是去看了一下select2的使用文档，才知道，原来人家默认就会传当前搜索值过去。真是气自己为什么不一开始就看官方文档，大概还是因为自己英语太菜了吧，看好久还是没看明白，去找中文版的又没讲明白怎么用……

select2插件的使用方法：

1、默认发送的查询参数

• term : The current search term in the search box.
• q : Contains the same contents as term.
• _type: A “request type”. Will usually be query, but changes to query_append for paginated requests.
• page : The current page number to request. Only sent for paginated (infinite scrolling) searches.

翻译：

• term（术语）:搜索框中的当前搜索术语。
• q：包含与term相同的内容。
• _type：一个“请求类型”。通常是query，但对分页请求更改为query_append。
• page（页面）：要请求的当前页码。只发送分页(无限滚动)搜索。

So！不需要自己获取select的当前搜索值，人家会自动传一个过去，咱们只要在后台接收就好了。正确代码（前端代码不需要修改）：

@ResponseBody//返回json数据给前端
@RequestMapping("/bus/getType")
public List<Bus>  getBus(ModelMap map , HttpServletRequest request, @Valid String q ) {
    Page<Bus> page = bus.findAll(new Specification<Bus>(){
        @Override
        public Predicate toPredicate(Root<Bus> root, CriteriaQuery<?> query,CriteriaBuilder cb){
            List<Predicate> list = new ArrayList<Predicate>();
            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<Bus> busList = page.getContent();
    map.put("type", q);
    return busList;
}

2、自定义查询参数

（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
        }
    });
			
});

3、分页：使用"infinite scrolling"模式加载数据

$('#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
        }
    };
}

4、动态url

如果请求的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