如何在Select2的「无结果」下拉提示中插入可点击链接？

问题 #

使用Select2组件时，想要在搜索无匹配项的「无结果找到」提示里插入可点击链接，但直接通过language.noResults返回带HTML的文本时，内容会被转义，最终显示的是HTML代码而非可点击的链接，实际效果如下：

之前尝试的配置代码：

var config = {
        "language": {
                "noResults": function(){
                        return "If you see no results, please <a href='/disclaimer'>see disclaimer</a>"
                }
         // 其他配置...
        },
   }

jQuery(selector).select2(config);

解决办法 #

Select2默认会对语言配置中的文本进行HTML转义，要让HTML内容正常渲染，需要在配置中添加escapeMarkup选项，自定义转义逻辑跳过HTML转义：

var config = {
    "language": {
        "noResults": function(){
            return "如果未找到结果，请<a href='/disclaimer'>查看免责声明</a>";
        }
    },
    // 关键配置：跳过HTML内容的转义处理
    "escapeMarkup": function(markup) {
        return markup;
    }
    // 其他配置...
}

jQuery(selector).select2(config);

注意事项 #

• escapeMarkup的默认作用是转义HTML以防范XSS风险，因此仅当你确认插入的HTML内容是安全的（比如指向站内页面的链接）时，才建议使用这种方式。
• 如果需要更精细的权限控制，可在escapeMarkup函数中添加过滤逻辑，仅允许指定的HTML标签（比如仅保留<a>标签）。

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