近期项目中的需求,要求做一个带查询过滤的、实时数据库调取数据的下拉列表控件,然后就找到了这个select2控件,直接$(obj).select2();就可以实现输入过滤效果,当然其还有ajax实时调用功能,适当调整后发现这个控件从外观、体验、性能上都能满足要求。

不过网上这控件的帮助文档都很粗,即便是关于ajax帮助文档也大多都是照搬官方的不实用,所以把这次项目中实用的部分摘取出来供以后需要时使用。

    $.id('#select_id').select2({
        ajax: {
            type: 'POST',
            url: '/api/json.aspx',
            delay: 300,
            data: function (params) {
                var query = {
                    q: params.term
                }
                return query;
            },
            processResults: function (data, params) {
                return { results: data };
            },
            cache: true
        }
    });

 

解释一下代码中的各参数意义:
type:ajax请求post或get
url:ajax请求地址
delay:用户输入查询内容后延迟xxx毫秒即向ajax查询(如果不设置的话用户打一个字母就会请求一次ajax,很浪费性能)
data:ajax请求传入参数,其中params.term指的是用户输入的查询内容,默认不需要修改此块代码。
processResults:返回结果处理,默认不需要修改此块代码。代码中不写这段可能控件取不到值。返回的json应包含id(保存值)、text(显示文本)字段。
cache:是否有缓存,实际效果体验不出缓存有什么明显的好处,总之不常更改的数据这个功能打开就好。

控件效果:

github链接:https://github.com/select2/select2/

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