這里我選擇的是select2這個插件。

官網地址：https://select2.org/getting-started/builds-and-modules

主要實現輸入框可以有多選下拉框

<div style="width:100%;height:70px;margin-left: 20px;" id ="multipleDiv"><h2 class="zrl-h"><span style="position:absolute;left: 0;top: 0;width: 100%;text-align: left;font-weight: bold;font-size: 18px;height:2px;">異常數據庫</span></h2><br><select id="abnormal_id" multiple="multiple"class="select2" style="width: 85%;"><c:forEach items="${abnormalList}" var="key" ><option value="${key.id}">${key.bigItem}-${key.pettyItem}-${key.expCondition} </option></c:forEach></select><input id="Button" type="button" style="width: 120px;height: 35px;font-size: 20px;font-weight: 600;background: #D9FFFF;border-top-width: 0px;border-left-width: 0px;border-right-width: 0px;border-bottom-width: 0px;margin-left: -20;margin-left: -20;margin-left: -2;" value="確認添加" /> </div> //初始化select$('#abnormal_id').select2({placeholder : '輸入體檢項目關鍵字',// tags : true,手動輸入字段不在系統內自行添加multiple : true,height: '70px',maximumSelectionLength : 10,allowClear : true,language: "zh-CN",});$("#Button").click(function() {var data = $("#abnormal_id").val();//獲取選中值}

我引入的是select2@4.0.12版本?這里tags如果開啟會和一些輸入法產生沖突導致例如搜狗?會在輸入拼音回車后展示出之前輸入的拼音和漢字。解決方案是添加以逗號為分割的屬性? ：? tokenSeparators: [ ',' ],? ? ? ? ? ?來解決這個問題

總結

以上是生活随笔為你收集整理的select2 手动输入匹配下拉框内容可多选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。