Semantic UI Dropdown 在选择选项上提交表单答案

【问题标题】：Semantic UI Dropdown submits form on select optionSemantic UI Dropdown 在选择选项上提交表单
【发布时间】：2016-12-27 18:28:49
【问题描述】：

我对 Semantic UI 下拉扩展有一个大问题。我已经使用 ajax 后端配置了多个搜索下拉列表。当用户尝试添加新项目时，表单正在提交。

我的下拉配置：

    $(e).dropdown({
        allowAdditions: true,
        saveRemoteData: false,
        action: 'combo',
        match: 'text',
        apiSettings: {
          url: data('api')
        }
    })

目标：当我将新项目添加到多选时，表单未提交。

【问题讨论】：

你在 select 中使用“enter”键吗？
字段目标是从现有列表中选择标签或创建新标签的可能性。当我添加不存在标记并按 ENTER 时 - 表单提交。
我不知道对此的实际解决方案是什么，但您可能可以为下拉列表周围的 div 添加键处理程序并在事件上执行 stopPropagation()。也许这有帮助：stackoverflow.com/questions/10313032/…
诀窍是将处理程序放置在仅包含下拉表单的元素上。
@NilsLuxton：如果您还没有找到解决方案，请参阅下面的答案（在您的下拉声明中添加 keys.delimiter 键）。

标签： semantic-ui dropdown multiple-select

【解决方案1】：

我找到了解决此问题的方法here (Semantic-UI issue #4763)。只需在下拉声明中添加 keys.delimiter 键即可：

$(e).dropdown({
  allowAdditions: true,
  saveRemoteData: false,
  action: 'combo',
  match: 'text',
  apiSettings: {
    url: data('api')
  },
  keys: {
    delimiter: 13
  }
});

【讨论】：