使用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 类。