前阵子，因为项目需求要支持下拉框多选，需要引入select插件。因为项目框架比较老旧庞大，就选了较多人使用的select2、chosen来测评。下面简单的介绍一下试用感受。
chosen特点：
官网：https://harvesthq.github.io/chosen/options.html
1、自带的搜索功能较丰富：支持模糊搜索、 分词搜索；
2、满足下拉框基本功能：单选、多选、选项分组等等；
3、取值、赋值、动态装载选项都较方便；
4、搜索框placeholder、搜索无结果等场景的提示内容可以个性化配置，如搜索无结果时提示：没有找到结果！；
5、数据量大(2W+)时，加载选项慢。
select2特点：
1、数据量大时有解决方案：支持滚动翻页来远程搜索选项；
2、自带的搜索功能：可模糊搜索；
3、满足下拉框基本功能：单选、多选、选项分组等等；
4、取值、赋值还算可以，但动态修改选项列表这个比较麻烦；
5、搜索框placeholder、搜索无结果等场景不能个性化提示内容；
综上试用后总结的特点：
chosen更适用于数据量较小、需要丰富搜索的场景。
select2的话，建议在数据量多的情况下，利用其滚动翻页功能，可更好提高选项加载效率。
鉴于项目下拉框的选项需支持2W+，且要模糊搜索等，就选用了select2插件啦。
下面是试用时的其中的一个例子，例子只展示了部分配置，详细配置就需要各位自行去官网查阅了。
html，select容器
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<script type="text/javascript" src="/statics/js/jquery-ui-1.8.23.custom/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src='/statics/js/select2-4.0.12/js/select2.js'></script>
<link rel="stylesheet" href="/statics/js/select2-4.0.12/css/select2.css">
<script type="text/javascript" src='/statics/js/chosen_v1.4.2/chosen.jquery.js'></script>
<link rel="stylesheet" href="/statics/js/chosen_v1.4.2/chosen.css">
<body>
<div>
<select name="select2-demo" id="select2-demo" style="width: 230px;"></select>
<select name="chosen-demo" id="chosen-demo" style="width: 230px;"></select>
</div>
</body>
</html>
js，初始化select2插件
1 initSelect2(["#select2-demo"]); 2 3 function initSelect2(levelDomArr, unInclude){ 4 var pageSize = 10; 5 $.each(levelDomArr, function (i, level) { 6 var levelDom = $(level); 7 levelDom.select2({ 8 ajax: { 9 url: function (params) { 10 var unInclude = ''; 11 if (level != "#level1") { 12 if ($("#level1").val()) { 13 unInclude += (unInclude === '' ? '' : ',') + $("#level1").val(); 14 } 15 } 16 if (level != "#level2") { 17 if ($("#level2").val()) { 18 unInclude += (unInclude === '' ? '' : ',') + $("#level2").val(); 19 } 20 } 21 if (level != "#level3") { 22 if ($("#level3").val()) { 23 unInclude += (unInclude === '' ? '' : ',') + $("#level3").val(); 24 } 25 } 26 return "/select2/url" + (unInclude === '' ? '' : ("?unInclude=" + unInclude)); 27 }, 28 type: 'POST', 29 dataType: 'json', 30 delay: 250, // 用户停止输入多少毫秒后开始查询，减轻搜索压力 31 data: function(params){ 32 // 传递到后端的参数 33 return { 34 p_id: 0, 35 // 搜索框内输入的内容 36 selectInput: params.term, 37 // 当前页 38 curPage: params.page || 1, 39 // 每页显示多少条记录，注意每页显示记录太少时可能会无法触发滚动底部进行翻页功能 40 pageSize: pageSize, 41 }; 42 }, 43 processResults: function (res, params) { 44 params.page = params.page || 1; 45 var cbData = []; 46 $.each(res.rows, function (i, val) { 47 var option = { "id": val.id, "text": val.text }; 48 cbData.push(option); 49 }) 50 51 return { 52 results: cbData, 53 pagination: { 54 more: (params.page * pageSize) < res.total 55 } 56 }; 57 }, 58 cache: true, 59 }, 60 width: '230px', 61 // allowClear: true, // 允许一键清空所有已选项 62 placeholder: lang.search_select_approver, // 63 minimumInputLength: 0, // 搜索框至少要输入的长度，此处设置大于0时需输入才显示搜索结果 64 }); 65 }); 66 }
js，初始化chosen插件
initChosen(["#chosen-demo"]); function initChosen(levelDomArr){ $.each(levelDomArr, function (i, levelDom) { levelDom.chosen({ no_results_text: "没有找到结果！",//搜索无结果时显示的提示 search_contains:true, //关键字模糊搜索。设置为true，只要选项包含搜索词就会显示；设置为false，则要求从选项开头开始匹配 allow_single_deselect:true, //单选下拉框是否允许取消选择。如果允许，选中选项会有一个x号可以删除选项 disable_search: false, //禁用搜索。设置为true，则无法搜索选项。 disable_search_threshold: 0, //当选项少等于于指定个数时禁用搜索。 inherit_select_classes: true, //是否继承原下拉框的样式类，此处设为继承 placeholder_text_multiple: '搜索或选择', width: '200px', //设置chosen下拉框的宽度。即使原下拉框本身设置了宽度，也会被width覆盖。 max_shown_results: 100, //下拉框最大显示选项数量 display_disabled_options: false, single_backstroke_delete: true, //false表示按两次删除键才能删除选项，true表示按一次删除键即可删除 case_sensitive_search: false, //搜索大小写敏感。此处设为不敏感 group_search: false, //选项组是否可搜。此处搜索不可搜 include_group_label_in_selected: true //选中选项是否显示选项分组。false不显示，true显示。默认false。 }); }); }