CODEWITHSUNDEEP
jquery
Dazvolt
Dazvolt

Reputation: 697

Search value in text and highlight it

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.

Upvotes: 0

Views: 98

Answers (2)

LGVentura
LGVentura

Reputation: 1547

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/

Upvotes: 1

Shail
Shail

Reputation: 873

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

Upvotes: 1

Related Questions