最開始我是使用 select2，但是select2有個比較煩人的缺陷，多選不支持搜索，這樣如果下拉菜單選項多了，那豈不是要一直划拉，這時候有人會問了，你是不是沒看官方文檔，額 ，官方文檔我還真看了，訥訥，官方原話
所有我開始找另外的插件，找啊找，找到了multiple-select，先看了官方的例子
看到這里沒有，多選搜索是支持的，我決定試試
官方資源
//官網
http://multiple-select.wenzhixin.net.cn/
//github
https://github.com/wenzhixin/multiple-select
//官方CDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.js"></script>
//下載地址
https://github.com/wenzhixin/multiple-select/releases
//所有Demo地址
http://multiple-select-live.wenzhixin.net.cn/
目錄結構
multiple-select/
├── site/
├── src
| ├── constants
| ├── locale
| ├── utils
| ├── vue
│ ├── MultipleSelect.js
│ ├── multiple-select.css
│ ├── multiple-select.js
├── dist
│ ├── multiple-select-es.js
│ ├── multiple-select-es.min.js
│ ├── multiple-select.css
│ ├── multiple-select.js
│ ├── multiple-select.min.css
│ ├── multiple-select.min.js
└── README.md
src/，是我們的CSS，JS的源代碼。該dist/文件夾包含使用編譯和縮小的所有內容src/。該docs/文件夾包含我們文檔的源代碼。除此之外，任何其他包含的文件都提供對軟件包，許可證信息和開發的支持。
快速預覽Demo
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, Multiple Select!</title>
<link rel="stylesheet" href="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.css">
</head>
<body>
<!-- Single Select -->
<select>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<!-- Multiple Select -->
<select multiple="multiple">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.js"></script>
<script>
$(function () {
$('select').multipleSelect()
})
</script>
</body>
</html>
效果
可以看到基礎單選多選已經實現
初始化選項設置
所有選項
{
#向后台提交的name
"name": "",
#下拉框的提示
"placeholder": "請選擇",
#是否打開選擇全部的選擇按鈕
"selectAll": true,
#是否是單選
"singleRadio": false,
#是否是多選
"multiple": false,
#是否隱藏組的選擇
"hideOptgroupCheckboxes": false,
#顯示多選的寬度
"multipleWidth": 80,
#最大高度
"maxHeight": 250,
#最大高度單位
"maxHeightUnit": "px",
#定義選擇下拉菜單的位置，只能是“bottom”或“top”。
"position": "bottom",
#顯示選定的值而不是文本。
"displayValues": false,
#顯示所選文本的標題。
"displayTitle": false,
#自定義顯示分隔符。
"displayDelimiter": ", ",
#select框中最多顯示多少個。默認為3
"minimumCountSelected": 3,
#添加的…如果設置了minimumCountSelected，則覆蓋formatCountSelected選項。
"ellipsis": false,
#默認情況下是否打開select下拉列表。
"isOpen": false,
#是否保持select下拉菜單始終打開
"keepOpen": false,
#用鼠標懸停而不是單擊來打開選擇下拉菜單。
"openOnHover": false,
"container": null,
#顯示要通過復選框項進行搜索的搜索字段。
"filter": false,
#只過濾optgroups而不過濾選項。
"filterGroup": false,
#設置篩選器占位符。也就是篩選data-filter-placeholder的
"filterPlaceholder": "",
#加快鍵盤的使用。輸入過濾文本，然后按Enter或空格將自動單擊select all和關閉下拉列表。鍵盤輸入過濾
"filterAcceptOnEnter": false,
#顯示清除圖標來取消選中的所有項目。
"showClear": false,
#允許您只選擇一個選項，如果選擇沒有多個屬性，此選項將自動設置為真
"single": false
}
$('select').multipleSelect({
placeholder: "請選擇",
});
設置下拉框提示語
$('select').multipleSelect({
placeholder: "請選擇",
});
設置開啟搜索
$('select').multipleSelect({
placeholder: "請選擇",
//select框中最多顯示多少個
minimumCountSelected: 20,
//開啟搜索
filter: true,
});
設置默認選中
#錯誤寫法
$('select').multipleSelect('setSelects', [1, 3]);
錯誤：Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
正確寫法
$('#select-keyword').multipleSelect('setSelects', [1, 3]);
清除默認選中
$('#select-keyword').multipleSelect('uncheckAll');