Select2的使用+搜索下拉框

2017-10-07 · 🙈Lei · 0条 · 813次

> select2官网

官网地址:https://select2.org/

> 基本使用方法

1.引入下面的css和js文件

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

2.调用下面的js方法

在<select></select>标签上执行.select2()方法。

$('select').select2();

> 国际化

select2默认是英文,要使用其他国家的语言(例如中文),需要从https://cdnjs.com/libraries/select2上下载相应的语言文件,如简体中文下载https://cdnjs.cloudflare.com/ajax/libs/select2/4.0...

select2.min.js之后引用语言JS文件。

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/i18n/zh-CN.js"></script>

> ajax搜索下拉

select2的ajax搜索功能需要使用如下的JS代码:

$("#fatherId").select2(
{
    ajax : {
        url : "替换成自己的查询地址",
        dataType : 'json', //数据类型是json
        delay : 250, //延迟
        data : function(params) { //params是select2的参数,下面的q就是通过params来获得的
            //返回向服务器传递的参数
            return {
                q : params.term, //输入的查询条件
                r : 0, //自定义参数
            };
        },
        processResults : function(data,params) { //服务器处理结果,data是服务器返回的结果
            return {
                results : data.results, //results应该是一个包含多个json对象的数组,这个根据服务器返回值进行设置,我的服务器返回的json对象的数组包含在data.results中。
            };
        },
        cache : true //是否缓存
    },
    placeholder : '请选择增员人', //placeholder
    escapeMarkup : function(markup) {
        return markup;
    }, // custom formatter
    minimumInputLength : 1,
    templateResult : formatRepo,
    templateSelection : formatRepoSelection,
    language: 'zh-CN', //国际化
});
<span class="redactor-invisible-space">
//对搜索结果进行自定义显示
function formatRepo(repo) {
    if (repo.loading) {
        return repo.text;
    }

    var markup = "<div class='col-lg-6'>" + repo.id + "</div>" + "<div class='col-lg-6'>" + repo.text + "</div>";
    return markup;
}

//选择后在select2上显示的内容
function formatRepoSelection(repo) {
    return repo.text;
}
</span>

说明:

官方给出的服务器返回示例如下:

{ "results": [ { "id": 1, "text": "Option 1" }, { "id": 2, "text": "Option 2" } ], "pagination": { "more": true } }

processResults方法中results接受的数据就是这种结构:[ { "id": 1, "text": "Option 1" }, { "id": 2, "text": "Option 2" } ],但是数据也可以自定义,如在每个json对象中添加name,然后就可以通过formatRepo(repo)formatRepoSelection(repo)两个方法来自定义显示的内容,和点击后选中的内容。

特别说明:对于像java这种强类型语言有个超级痛的地方需要注意,返回的id一定不能使int类型,要使用字符串,使用int的话是无法选中的。

如果想要了解如何在jsp或者php页面中初始化select2,请阅读我的博客《在jsp中初始化Select2》


  0