Highlight matching text in record display text search

[adilyalcin]

Highlight (such as with yellow background) the matching text within the record display.

Some resources:

• http://www.smashingmagazine.com/2010/09/5-coding-techniques-for-more-dynamic-websites/
• http://james.padolsey.com/snippets/highlighting-text-with-javascript/
• http://www.dotnetbull.com/2011/12/javascript-for-highlighting-text-inside.html
• http://jsfiddle.net/FutureWebDev/HfS7e/
• http://jsfiddle.net/UPs3V/291/
• http://www.the-art-of-web.com/javascript/search-highlight/?hilite=search+engine+keywords

[adilyalcin]

Currently the text search and the record display summaries can have different content.

Merge the two into one.

[julkue]

@adilyalcin I can only advise against using the above named plugins. They may work, but are poorly implemented. A few reasons:

• All of them are using either jQuery's .html() method ore the native innerHTML. This will destroy all events in the highlighting context and also triggers generation of the DOM over and over again which is bad for performance
• They all aren't hosted on a professional hosting platform like GitHub with issues. Users may not have the chance to submit their problems, so you don't have a guarantee that others didn't encountered problems
• They all aren't built upon unit tests. There are dozens of situations which need to be tested in order to guarantee functionality.
• They don't escape search terms. Entering * for example may end in unexpected behavior
• They don't merge multiple blanks (see e.g. https://github.com/julmot/mark.js/issues/33)
• They may not ignore <script> and <style> tags or tag names in general. Type in e.g. script here and you will see that the HTML <script> tag will be highlighted
• They may not contain a license information
• They may not be maintained
• ... (I think you get an idea ;-))

Instead, have a look at mark.js which is developed implemenented in several dozen cross-browser unit tests and brings you the benefit to have further options.

[adilyalcin]

Very nice! Thanks for the information @julmot . I will consider using mark.js for highlighting searched text.