前阵子,因为项目需求要支持下拉框多选,需要引入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。 }); }); }