前陣子，因為項目需求要支持下拉框多選，需要引入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。 }); }); }