如何自定义jQuery Select2标签选项外观？启用Tags功能遇配置难题

嘿，我懂你想要的效果——就是让Select2生成的新标签选项更直观，用户一眼就知道点它能新增条目对吧？其实你差一步，光调createTag不够，得结合templateResult来自定义渲染，我给你具体的实现方案：

我们需要用到Select2的两个核心配置项配合来实现：

• createTag：生成新标签的基础数据，顺便给新标签加个自定义标识
• templateResult：自定义每个选项（包括新标签）的HTML渲染结构

完整代码示例 #

假设你原来的Select2初始化代码是这样的：

$('#your-select-id').select2({
  tags: true,
  placeholder: "选择或输入标签",
  // 其他已有配置...
});

修改成下面的代码，就能实现你要的提示效果：

$('#your-select-id').select2({
  tags: true,
  placeholder: "选择或输入标签",
  createTag: function(params) {
    const inputTerm = $.trim(params.term);
    // 如果输入为空，不生成新标签选项
    if (!inputTerm) return null;
    
    // 给新标签数据添加自定义属性，方便后续区分
    return {
      id: inputTerm,
      text: inputTerm,
      isNewTag: true // 标记这是待创建的新标签
    };
  },
  templateResult: function(data) {
    // 判断是否是新标签，自定义渲染结构
    if (data.isNewTag) {
      return $(`<span><em>添加新标签：</em>${data.text}</span>`);
    }
    // 普通选项保持原有文本渲染
    return data.text;
  }
});

可选：优化样式让提示更醒目 #

如果想让提示文字更突出，可以加一点CSS：

/* 未选中状态的提示文字样式 */
.select2-results__option span em {
  color: #888;
  font-style: italic;
  margin-right: 6px;
}
/* 鼠标 hover 时的提示文字样式 */
.select2-results__option--highlighted span em {
  color: #fff;
}

为什么之前单独调createTag没用？ #

createTag只能控制新标签的基础数据（比如id和text），没法直接修改它的渲染外观。必须配合templateResult来改写HTML结构，才能给新标签加上提示性的前缀文字，让用户清晰理解这个选项的作用。

这样配置后，当用户输入一个不存在的内容时，下拉列表里就会显示带“添加新标签：”前缀的选项，完全符合你的期望效果。

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