jQuery text highlighter and filter Plugin

Hi Guys,

So I just thought it would be cool if I give my user an option to filter their page for a given text. Ok so I am not making any sense right now.

Lets take an example where you have a input box labelled filter. When someone types anything in it then a set area on your page becomes responsive and only displays part of that area which contains the word or string typed by the user.

That said wouldn’t it be great just to highlight that string in that area??

I can think of many use cases of this functionality. Before I go further this jQuery plugin is not there to replace in browser search, that is totally different to what this plugin does.

A download link will be provided later in the post so feel free to download your copy. A link back will also be appreciated if you find it useful. A full fledge demo is also available later in the post.

Ok so lets get started

Markup

For this Example I will use the markup below

[geshi lang="html5" nums="1" target="_self" ]

Ok So here is the Plugin code

[geshi lang="javascript" nums="1" target="_self" ]

The code above can be improved and I will do that when I get some extra time to look into that. Even though I am not a jQuery Expert I will appreciate feedback from Experts.

 

Bind input text field to plugin function

Basic Demo

My demos are located on DemoPill.com and demo for this plugin can be found here

http://jaspreetchahal.org/examples/jquery-onpage-text-highlighter-and-filter.html

Options

Now is the time to look at options

  1. animateHideNShow: true|false this property gives you the option to animate show and hide of containers that  does not contain text.
  2. focusOnLoad:false this option gives an option so that the focus can be on the filter text field when page initially loads
  3. highlightColor:’yellow’, you can specify the highlight color in plain text, HEX or even in rgb()
  4. textColorForHighlights:’#000000′, you can specify the foreground colour in plain text, HEX or rgb()
  5. caseSensitive:false, whether the text match should be case sensitive
  6. parentLookupClass:’jcorgFilterTextParent’, this class is for wrapper element such as

    . So use parentclass as value to this property

  7. childBlockClass:’jcorgFilterTextChild’ as shown in above point, give a classname to internal element where the filter should look for matching text.
  8. hideNegatives:false, whether to hide parentclass elements if text don’t match?

 

Download

Plugin can be downloaded from here

 

You can download the source and play with it, I am pretty sure that you will create a better version of this plugin in no time because there is nothing much happening there anyway :). If you like this plugin and you wish to support me, consider donations.

Donations – Caffeine is expensive

Buy me a bottle of Ice Tea :)

$ 175.00 raised.
Choose donation amount:

Advertisement

 

I hope this helps someone.

 

Cheers,

 

 

 

 

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Comments

  1. Hi guys, I’m implementing this function amazing I spent days behind her in order to do my job, she is working 90%, for the following reason if I type a letter p, for example, which is an html tag, the function shows the code for page and starts dialing the entire structure html, you would know how to solve this?

  2. Hi jaspreet,

    First of of I would like to say thanks regarding this plugin. Its really awesome. I found the exact solution what i was looking for.

    Just one thing i need to ask you could you please help me in modifying the plugin in such a way that it should not show any s while page loads. It should show results when we search.

    I tried but unable to succeed as i was new to jquery.

    Hope you will reply. Thank you once again.

Speak Your Mind

*

CommentLuv badge