Search value in text and highlight it

Question

So what I've so far is a plugin which pretend to work like <select> but with few changes.

There is search field in it, and what I want to do is highlight value that is found (or make text with decoration: underline).

Problem is, I don't know how to properly operate with values, and completely don't have and idea how I can insert tags (like <div> or <i>) before and after value that was found.

JSFiddle is here: http://jsfiddle.net/kspD8/

You can find code which performs operations on search in line 269:

$this.find('.ms-column:contains("' + value + '")').parents('.multiple-selector-table-row').show();

If you are not able to find it, look for section:

/* =========================================================== Keyup in search field =========================================================== */

Please note that due to plugin logic, you will not be able to select any other field, other than you've selected before (not a bug, just warning).

If you have any questions please feel free to ask.

Click on any field and table will appear below. In top of table there is a field which is a search field. — Dazvolt
– Dazvolt, Commented Jun 13, 2014 at 13:11

LGVentura · Accepted Answer · 2014-06-17 13:48:07Z

As friend said, you have to use a highlight plugin as:

http://bartaz.github.io/sandbox.js/jquery.highlight.html

Update you code this lines:

instead of using:

$this.find('.ms-search').keyup(function(event){

use:

$this.find('.ms-search').on('input',function(event){

and then, inside your 'if's use:

$this.find('.ms-column:contains("' + value + '")').highlight(value);

it will wrap the text you type in your .ms-search with a <span class="highlight">value</span>

Demo:

http://jsfiddle.net/KasH3/

Shail · Accepted Answer · 2014-06-13 13:04:56Z

1

You can use this plugin for this... http://hugoware.net/blog/more-jquery-magic-search-highlighting

answered Jun 13, 2014 at 13:04

Shail

8734 silver badges16 bronze badges

1 Comment

Shail Over a year ago

This plugin using very small piece of code. You can use it direct. They have used preg_replace function to search & add some class to highlight it. Once look at this. You can use just concept...

Collectives™ on Stack Overflow

Search value in text and highlight it

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related