如何使用selectize.js配置分隔符实现输入内容自动拆分多选项

你当前的代码仅配置了delimiter参数，缺少两个必要配置即可实现输入/粘贴带逗号内容自动拆分为独立标签的效果：

• 开启create配置，允许输入内容生成对应选项
• 新增splitOn配置，指定识别为拆分触发符的正则规则

修正后的完整代码 #

JS 部分 #

$(function () {
   $(".select-key").selectize({
      delimiter: ",",
      // 允许创建新选项，若仅允许预设的1-5可选，可替换为下方注释的过滤函数
      create: true,
      // 识别逗号作为拆分触发符
      splitOn: /,/
   });
});

// 可选：仅允许预设范围内的选项创建，替换上方的create: true即可
// create: function(input) {
//   if (/^[1-5]$/.test(input)) {
//     return { value: input, text: input }
//   }
//   return false
// }

HTML 部分（无需修改，保持原有配置即可） #

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.bootstrap3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.js"></script>

<select multiple class="form-control select-key" id="sel2" name="key-list[]">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

修改后输入1,2,3,4,5时就会自动按逗号拆分为5个独立的选项标签，符合预期效果。

内容的提问来源于stack exchange，提问作者Gorg