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” ]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Filter by keyword <input id="filter" style="background: url('img/filter.png') 95% 60% no-repeat; background-size: 16px; width: 150px;" type="text" /> <div class="jcorgFilterTextParent"> <h3>This is header 1</h3> <div class="jcorgFilterTextChild">Hac magnis? Ac dignissim nec! Phasellus aliquet magnis nisi, cursus. </div> </div> <div class="jcorgFilterTextParent"> <h3>This is header 2</h3> <div class="jcorgFilterTextChild">blah blah blah blah blah blah blah blah blah blah </div> </div> <div class="jcorgFilterTextParent"> <h3>This is header 3</h3> <div class="jcorgFilterTextChild">what the what the what the what the what </div> </div> <div class="jcorgFilterTextParent"> <h3>This is header 4</h3> <div class="jcorgFilterTextChild">are you serious? are you serious? are you serious? </div> </div> |
Ok So here is the Plugin code
[geshi lang=”javascript” nums=”1″ target=”_self” ]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
jQuery.fn.jcOnPageFilter = function(settings) { settings = jQuery.extend({ animateHideNShow: false, focusOnLoad:false, highlightColor:'yellow', textColorForHighlights:'#000000', caseSensitive:false, hideNegatives:false, parentLookupClass:'jcorgFilterTextParent', childBlockClass:'jcorgFilterTextChild' }, settings); jQuery.expr[':'].icontains = function(obj, index, meta) { return jQuery(obj).text().toUpperCase().indexOf(meta[3].toUpperCase()) >= 0; }; if(settings.focusOnLoad) { jQuery(this).focus(); } var rex = /()(.+?)(<\/span>)/g; var rexAtt = "g"; if(!settings.caseSensitive) { rex = /()(.+?)(<\/span>)/gi; rexAtt = "gi"; } return this.each(function() { jQuery(this).keyup(function(e) { if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { return false; } else { var textToFilter = jQuery(this).val(); if (textToFilter.length > 0) { if(settings.hideNegatives) { if(settings.animateHideNShow) { jQuery('.'+settings.parentLookupClass).stop(true, true).fadeOut('slow'); } else { jQuery('.'+settings.parentLookupClass).stop(true, true).hide(); } } var _cs = "icontains"; if(settings.caseSensitive) { _cs = "contains"; } jQuery.each(jQuery('.'+settings.childBlockClass),function(i,obj) { jQuery(obj).html(jQuery(obj).html().replace(new RegExp(rex), "$2")); }); jQuery.each(jQuery('.'+settings.childBlockClass+":"+_cs+"(" + textToFilter + ")"),function(i,obj) { if(settings.hideNegatives) { if(settings.animateHideNShow) { jQuery(obj).parent().stop(true, true).fadeIn('slow'); } else { jQuery(obj).parent().stop(true, true).show(); } } var newhtml = jQuery(obj).html(); jQuery(obj).html(newhtml.replace( new RegExp(textToFilter, rexAtt), function(match) { return ["<span style="background: '+settings.highlightColor+'; color: '+settings.textcolorforhighlights+';">", match, "</span>"].join(""); })); }); } else { jQuery.each(jQuery('.'+settings.childBlockClass),function(i,obj) { var html = jQuery(obj).html().replace(new RegExp(rex), "$2"); jQuery(obj).html(html); }); if(settings.hideNegatives) { if(settings.animateHideNShow) { jQuery('.'+settings.parentLookupClass).stop(true, true).fadeIn('slow'); } else { jQuery('.'+settings.parentLookupClass).stop(true, true).show(); } } } } }); }); }; |
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
|
1 2 3 |
jQuery(document).ready(funciton(){ jQuery("#filter").jcOnPageFilter({caseSensitive:true}); }); |
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
- animateHideNShow: true|false this property gives you the option to animate show and hide of containers that does not contain text.
- focusOnLoad:false this option gives an option so that the focus can be on the filter text field when page initially loads
- highlightColor:’yellow’, you can specify the highlight color in plain text, HEX or even in rgb()
- textColorForHighlights:’#000000′, you can specify the foreground colour in plain text, HEX or rgb()
- caseSensitive:false, whether the text match should be case sensitive
- parentLookupClass:’jcorgFilterTextParent’, this class is for wrapper element such as
. So use parentclass as value to this property
- childBlockClass:’jcorgFilterTextChild’ as shown in above point, give a classname to internal element where the filter should look for matching text.
- hideNegatives:false, whether to hide parentclass elements if text don’t match?
Download
Plugin can be downloaded from here
[wpdm_file id=31]
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
Advertisement
I hope this helps someone.
Cheers,
One thing you could do to really improve this would be to have a clear function. Rather than just letting the user delete the contents.
Under “BIND INPUT TEXT FIELD TO PLUGIN FUNCTION”
jQuery(document).ready(funciton(){ /*FUNCTION IS MISSPELLED*/
jQuery(“#filter”).jcOnPageFilter({caseSensitive:true});
});
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?
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.