使用jQuery Tokeninput时如何使匹配的字符变为粗体+红色

Question

我正在使用http://loopj.com/jquery-tokeninput/demo.html#formatting

我想将匹配的字符也设置为红色，但无法找到他们拥有的CSS或Javascript。

他们的项目在GitHub。

Answer 1

使用chrome开发人员工具我发现 jquery-tokeninput 正在格式化搜索结果，如下所示：

<ul style="display: block; overflow: hidden;">
    <li class="token-input-dropdown-item2-facebook">Trad<b>in</b>g Spouses</li>
    <li class="token-input-dropdown-item-facebook">T<b>in</b> Man</li>
</ul>

所以它没有使用css类来突出显示匹配的字符，而是手动将这些字符放在<b>标记内。在javascript源文件中快速搜索后，我找到了这个函数：

// Highlight the query part of the search term
function highlight_term(value, term) {
    return value.replace(
      new RegExp(
        "(?![^&;]+;)(?!<[^<>]*)(" + regexp_escape(term) + ")(?![^<>]*>)(?![^&;]+;)",
        "gi"
      ), function(match, p1) {
        return "<b>" + escapeHTML(p1) + "</b>";
      }
    );
}

因此，我想只需要修改它就可以自定义匹配的字符样式。例如，您可以将返回的字符串更改为：

return '<b class="match">' + escapeHTML(p1) + '</b>';

将您的样式应用于 b.match css类。