javascript - Select2可以正确显示粗体文本，但是键入时，粗体将成为html标签

我正在使用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标签。我希望文本在搜索时保持粗体，而不显示标签。如果仅删除它们，该文本将不再是粗体。

之前/之后的示例:

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

一: bla bla bla

二: bla bla bla bla

三: bla bla bla

我的问题是，当我开始在框中输入内容时，它们变为:
<span class="boldwrap">一:</span> bla bla bla
<span class="boldwrap">二:</span> bla bla bla
<span class="boldwrap">三:</span> bla bla bla

我希望它们像第一步一样保持初始字母粗体:

一: bla bla bla

二: bla bla bla bla

三: bla bla bla

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

一:bla bla bla bla

二:bla bla bla bla

三:bla bla bla bla

最佳答案

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