Semantic UI单搜索选择下拉框allowAdditions：如何新增值至菜单？

嘿，我完全懂你遇到的这个痛点！开启allowAdditions: true后，单选下拉框只能把新输入的值同步到隐藏输入框，但没法自动加到下拉菜单里，而且onLabelCreate确实只在多选场景下生效——这是Semantic UI的一个遗留问题，目前官方还没修复。

你的临时方案思路是对的，不过可以优化得更流畅一些，避免“粗糙感”，我给你梳理下更完善的实现方式：

优化后的实现步骤 #

• 初始化缓存选项：页面加载完成后，先把下拉框里的原始选项文本（或值）缓存到数组里，避免每次都去DOM里遍历，提升性能
• 绑定onChange回调：在回调里做以下判断和操作：
  1. 获取用户当前输入/选中的文本值（注意区分value和text，新值的value通常和text一致）
  2. 检查这个文本是否存在于缓存的选项列表中
  3. 如果不存在：
     • 动态创建新的菜单项，添加到下拉菜单的.menu容器里
     • 更新缓存的选项列表，把新值加进去
     • 调用dropdown的set selected方法，确保新选项处于选中状态
     • （可选）手动同步隐藏输入框的值，不过开启allowAdditions后Semantic UI通常会自动处理

代码示例 #

$(document).ready(function() {
  const $dropdown = $('.ui.search.selection.dropdown');
  // 缓存原始选项文本
  let existingOptions = $dropdown.find('.menu .item').map(function() {
    return $(this).text().trim();
  }).get();

  $dropdown.dropdown({
    allowAdditions: true,
    onChange: function(selectedValue, selectedText) {
      const trimmedText = selectedText.trim();
      // 避免重复添加相同选项
      if (!existingOptions.includes(trimmedText)) {
        // 创建新菜单项
        const newMenuItem = $(`<div class="item" data-value="${selectedValue}">${trimmedText}</div>`);
        $dropdown.find('.menu').append(newMenuItem);
        // 更新选项缓存
        existingOptions.push(trimmedText);
        // 确保选中新选项（防止状态异常）
        $dropdown.dropdown('set selected', selectedValue);
      }
    }
  });
});

额外小技巧 #

如果你想更精准地控制触发时机（比如只在用户按下回车确认输入时添加选项，而不是每次输入变化都执行逻辑），可以监听下拉框的keydown事件，判断按下的是回车键后再执行添加逻辑，这样能减少不必要的DOM操作。

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