Select2开源项目如何轻松加入到项目中

1.Select2控件的介绍

Select2为您提供了一个可定制的选择框，支持搜索、标记、远程数据集、无限滚动以及许多其他高度使用的选项。

2.Select2控件下载地址

https://github.com/select2/select2/releases

我在该页面下载的 https://github.com/select2/select2/releases下载的源代码，解压后目录结构如下：

3.Select2引入方式

通常情况下我们只需要引用select2的js和css，

<scriptsrc="<%=realPath%>/res/select2/js/select2.full.min.js"></script>

<link href="<%=realPath%>/res/select2/css/select2.css" rel="stylesheet" />

若需要使用中文提示语，则需要引入中文国际化的js如下：（注意事项，zh-CN.js引用一定要在select2.full.min.js"下面，防止中文国际化的JS不起作用）

<script src="<%=realPath%>/res/select2/js/i18n/zh-CN.js"></script>

同时需要配置显示语言如下：

$(".js-data-example-ajax").select2({

language: "zh-CN"});

4.要想使用select2需要执行如下代码

$(".js-example-basic-single").select2();

<script type="text/javascript">
$(document).ready(function() {
  $(".js-example-basic-single").select2();
});
</script>

5.select2控件的ajax使用格式如下：

$(".js-data-example-ajax").select2({

language: "zh-CN",

minimumInputLength: 1,    //搜索框至少要输入的长度，此处设置后需输入才显示结果

maximumSelectionLength: 32, //设置最多可以选择多少项

ajax: {

    url:"<%=realPath%>/provider_list/listAjax",

    type:"post",

    dataType: 'json',

    delay: 250,

    data: function (params) {

      return {

        name: params.term // search term

      };

    },

    processResults: function (data, params) {

        for (var i = 0; i < data.list.length; i++) {

        data.list[i].id = data.list[i].id;

        data.list[i].text = data.list[i].name;

                } 

      return {

        results: data.list

      };

    },

    cache: true

  },

allowClear: true,

placeholder:'请输入后选择',//默认文字提示

escapeMarkup: function (markup) {return markup; }, // 让template的html显示效果，否则输出代码

templateResult: function formatRepo(repo){return repo.text;},// 自定义下拉选项的样式模板

    templateSelection: function formatRepoSelection(repo){return repo.text;}    // 自定义选中选项的样式模板

});

select2控件change事件监听方式如下：

$(".js-data-example-ajax").on("change",function (e) {

//id  $(this).val() providerName $(this).text()

$("#product_name").empty();

$("#product_name").append("<option value=''>"+"请选择"+"</option>");

$("#product_type").empty();

$("#product_type").append("<option value=''>"+"请选择"+"</option>");

var data = {providerId:$(this).val()};

$.post("<%=realPath%>/product/ajaxFindProductListByProviderId", data ,function(result){

if(result && result.length>0){

for(var a=0; a<result.length; a++){

$("#product_name").append("<option value='"+result[a].id+"'>"+result[a].productName+"</option>");

$("#product_type").append("<option value='"+result[a].id+"'>"+result[a].productNum+"</option>");

} 

}else{

return layer.msg(result.message,function(){});

}

},"json");

});

select使用定义

<selectclass="js-data-example-ajax form-control" style="width:100%;"></select

更多使用实例可以查看官网：http://select2.github.io/examples.html