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

它工作正常，当打开选择菜单时，您会看到第一个单词（直到符号＆＃34;：＆＃34;）以粗体显示。

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

我该怎么办，所以不仅在打开和浏览选择菜单时，而且在搜索框中输入时都会出现粗体文字？我不确定为什么使用突出显示功能css类工作正常，但是粗体它没有。

这是JSFiddle的问题。

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

示例之后/之后：

打开菜单并滚动时，文本项应如下所示（请参阅下面的小提琴）：

一： 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

这里有一个工作小提琴：https://jsfiddle.net/sx25kLng/3/，你用.text()方法插入了html。

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

1 个答案: