select2 手动输入匹配下拉框内容可多选

这里我选择的是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();//获取选中值
         }

我引入的是[email protected]版本 这里tags如果开启会和一些输入法产生冲突导致例如搜狗 会在输入拼音回车后展示出之前输入的拼音和汉字。解决方案是添加以逗号为分割的属性  ：  tokenSeparators: [ ',' ],           来解决这个问题