Select2 正确显示粗体文本，但在键入时，粗体变为 html 标记

Question

我正在使用 Select2 下拉菜单，这是我在定义下拉菜单时使用的 templateResult 函数，以便对结果应用格式：

templateResult : function (item) {
            if (item.loading) {
                return item.text;
            }
            var term = query.term || '';
            var $result = markMatch('<span class="boldwrap">' + item.text.substring(0, item.text.indexOf(":")) + '</span>' + item.text.substring(item.text.indexOf(":")), term);
            return $result;

        }

我在那里的 markMatch 函数指的是我在其他地方定义的函数，它会在您键入时突出显示搜索结果。这很好用，并按预期突出显示。

我唯一的问题是 $result 应该 return 的粗体文本。

它工作正常，当打开 select 菜单时，您会看到第一个单词（直到符号“:”）以粗体显示。

问题是，当我开始在菜单的搜索区域中输入内容时，粗体文字消失了，您只能看到 html 标签 <span class... etc...

如何才能使粗体文本不仅在打开和浏览 select 菜单时出现，而且在搜索框中输入时也出现？我不确定为什么 css class 使用突出显示功能可以正常工作，但使用粗体功能却不行。

这是一个 JSFiddle 的问题。

澄清： 我不想简单地删除 html 标签。我希望文本在搜索时保持粗体，而不显示标签。如果你简单地删除它们，文本就不再是粗体了。

BEFORE/AFTER 示例：

打开菜单并滚动时，文本项应如下所示（参见下面的 fiddle）：

一个： bla bla bla

两个： bla bla bla

三个： bla bla bla

我的问题是，当我开始在框中输入时，它们变成：

一个: bla bla bla

两个： bla bla bla

三个： bla bla bla

我希望他们保持第一步的状态，首字母为粗体：

一个： bla bla bla

两个： bla bla bla

三个： bla bla bla

其他用户建议我的解决方案，只需删除 html 标签但不保留粗体文本，因此使用他们的代码，菜单变为：

一个：bla bla bla

两个：bla bla bla

三个：bla bla bla

Answer 1

这里您有一个有效的 fiddle：https://jsfiddle.net/sx25kLng/3/，您使用 .text() 方法插入了 html。

Select2 正确显示粗体文本，但在键入时，粗体变为 html 标记

Select2 displays bold text correctly, but when typing, bold becomes the html tag

javascript

jquery

select2