javascript - 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 的粗体文本应该返回。

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

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

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

这是一个 JSFiddle与问题。

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

示例之前/之后:

打开菜单并滚动时，文本项应如下所示(参见下面的 fiddle ):

一: bla bla bla

两个 bla bla bla

三: bla bla bla

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

<span class="boldwrap">一:</span>呜呜呜

<span class="boldwrap">二:</span>呜呜呜

<span class="boldwrap">三:</span>呜呜呜

我希望他们保持像第一步一样，首字母为粗体:

一: 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。