0

I am using http://loopj.com/jquery-tokeninput/demo.html#formatting

I would like to make the matching chars also red, but cannot locate the piece of CSS or Javascript they have.

enter image description here

Their project is on GitHub.

Pentium10
  • 204,586
  • 122
  • 423
  • 502
  • 1
    You should use Chrome Dev Tools(built into chrome) or Firefox Firebug extension. You will be able to right click the bolded text and "inspect element". This should reveal the span tag around it and what class they are using, as well as the CSS styles applied to it. – Hippocrates Jan 30 '13 at 22:07
  • I've tried that and I cannot catch the element. – Pentium10 Jan 30 '13 at 22:08
  • If the GUI is getting in the way of you right clicking it (I think that's what you mean), you can view the page source and find out where the name is and what tag/class it has. – Hippocrates Jan 30 '13 at 22:09
  • I've been doing that for almost 1 hour and had no luck, that's why I posted the question. – Pentium10 Jan 30 '13 at 22:10

1 Answers1

2

Using chrome developer tools I found out that jquery-tokeninput is formatting search results like the following:

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

So it is not using a css class to highlight the matching chars, it is doing it manually putting those chars inside a <b> tag. After a quick search in the javascript source file I was able to find this function:

// 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>";
      }
    );
}

Hence, I guess it is only a matter of modifying it to be able to customize the matching chars style. For instance, you could change the returning string to:

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

And apply your styles to the b.match css class.

Thomas C. G. de Vilhena
  • 13,819
  • 3
  • 50
  • 44
  • I am using resultsFormatter and that overrides all the HTML: ` resultsFormatter: function(item){ return "
  • " + "" + "
    " + item.first_name + " " + item.last_name + "
    • " },` I couldn't implement what you say. – Pentium10 Jan 30 '13 at 22:32
  • Here is a working fiddle of what I've suggested in my answer: http://jsfiddle.net/8dN5y/. Just type **red** in the input box to see the results. – Thomas C. G. de Vilhena Jan 30 '13 at 23:30
  • I've updated your fiddle to include my resultFormatter and it doesn't work http://jsfiddle.net/8dN5y/3/ – Pentium10 Feb 05 '13 at 18:15
  • I made another jsfiddle using the **tokeninput** website example (the one that uses a **resultFormatter**) and it worked just fine: http://jsfiddle.net/8dN5y/7/. Type in "Alex" to see the results – Thomas C. G. de Vilhena Feb 05 '13 at 22:32