如何为Chosen自定义选择框添加可新增选项的输入文本字段

嘿，好消息——你完全不需要把原生的<select>/<option>结构改成<ul>/<li>！Chosen插件本身就是为增强原生选择框设计的，咱们可以直接基于你现有的HTML结构实现需求。下面是具体的实现步骤：

1. 保留原生HTML结构 #

你的现有代码完全可以继续使用：

<select class="replace-select"> 
  <option value="select-filled-1">Select Filled 1</option> 
  <option value="select-filled-2">Select Filled 2</option> 
  <option value="select-filled-3">Select Filled 3</option> 
  <option value="select-filled-4">Select Filled 4</option> 
  <option value="select-filled-5">Select Filled 5</option> 
  <option value="select-filled-6">Select Filled 6</option> 
  <option value="select-filled-7">Select Filled 7</option> 
  <option value="select-filled-8">Select Filled 8</option> 
</select>

2. 初始化Chosen并添加自定义输入框 #

通过JavaScript（结合jQuery，因为Chosen依赖jQuery），我们可以在Chosen初始化完成后，往它的下拉面板底部插入自定义输入区域：

$(document).ready(function() {
  // 初始化Chosen插件
  const $select = $('.replace-select').chosen({
    width: '100%', // 根据你的需求设置宽度
    placeholder_text_single: '请选择或输入自定义内容'
  });

  // 获取Chosen的下拉面板容器
  const $chosenDrop = $select.next('.chosen-container').find('.chosen-drop');

  // 插入自定义输入区域
  $chosenDrop.append(`
    <div class="custom-input-container">
      <input type="text" class="custom-option-input" placeholder="Eigene Auflage">
    </div>
  `);

  // 为输入框添加样式（可选，让它更适配Chosen的UI）
  $('.custom-input-container').css({
    padding: '8px 10px',
    borderTop: '1px solid #eee'
  });
  $('.custom-option-input').css({
    width: '100%',
    padding: '6px',
    boxSizing: 'border-box',
    border: '1px solid #ccc',
    borderRadius: '4px'
  });
});

3. 实现输入内容添加为新选项的逻辑 #

接下来监听输入框的回车事件，把用户输入的内容添加为新选项，并同步到Chosen中：

// 监听输入框的回车事件
$('.custom-option-input').on('keydown', function(e) {
  if (e.keyCode === 13) { // 按下回车键
    e.preventDefault();
    const inputValue = $(this).val().trim();
    if (!inputValue) return; // 空内容不处理

    const $select = $('.replace-select');
    // 检查是否已存在相同选项（可选，避免重复）
    const isDuplicate = $select.find(`option:contains("${inputValue}")`).length > 0;
    if (isDuplicate) {
      alert('该选项已存在');
      return;
    }

    // 创建新的option元素，插入到select的最顶部
    const $newOption = $(`<option value="${inputValue}">${inputValue}</option>`);
    $select.prepend($newOption);

    // 刷新Chosen插件，让新选项生效
    $select.trigger('chosen:updated');

    // 自动选中新添加的选项
    $select.val(inputValue).trigger('chosen:updated');

    // 清空输入框
    $(this).val('');
  }
});

为什么不用改成ul/li？ #

Chosen的核心设计就是封装原生select元素，它会自动同步原生<option>的变化到自己生成的UI中。如果改成ul/li，不仅会破坏Chosen的内置同步逻辑，还需要手动处理选中状态、搜索过滤等功能，反而会增加开发复杂度。直接基于原生select操作，既能利用Chosen的所有特性，又能轻松实现自定义需求。

内容的提问来源于stack exchange，提问作者Micha艂 P艂onski