javascript - 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.matchcssクラスに適用します。