jquery instant search based on keywords -
this plugin uses regular expression sort content, in real-time, based on search input. right script searching type.
here code:
$.fn.simplecontentsearch = function ( options ) { var settings = { 'active' : 'active', 'normal' : 'normal', 'searchlist' : 'searchable tr', 'searchitem' : 'td', 'effect' : 'none' // fade, none }; var base = this; var options = $.extend(settings, options); function startsearching(query) { $( '.' + settings.searchlist ).each(function () { $(this).children( settings.searchitem ).each(function () { var elem = $(this); if (!elem.html().match(new regexp('.*?' + query + '.*?', 'i'))) { if( settings.effect == 'fade' ){ $(this).parent( '.' + settings.searchlist ).fadeout(); } else { $(this).parent( '.' + settings.searchlist ).hide(); } } else { if( settings.effect == 'fade' ){ $(this).parent( '.' + settings.searchlist ).fadein(); } else { $(this).parent( '.' + settings.searchlist ).show(); } return false; } return; }); }); } return this.each(function() { // on blur base.blur(function () { var elem = base; elem.removeclass().addclass(options.normal); }); // on focus base.focus(function () { var elem = base; elem.removeclass().addclass(options.active); }); //keyup base.keyup(function () { startsearching(base.val()); }); return this; }); }
what want create few buttons : "text1" "text2" , when click on them work search "text1" without having type it. suggestions on how ? how script works: jsfiddle
thank you!
i forked fiddle , added functionality asked for. http://jsfiddle.net/acturbo/prnwe/2/
jquery
$().ready(function() { console.clear(); $('.searchfilter').simplecontentsearch({ 'active' : 'searchboxactive', 'normal' : 'searchboxnormal', 'searchlist' : 'searchable tr', 'searchitem' : 'td' }); $(".search-btn").on("click", function(){ $("#searchbox").val( $(this).data("search") ); $('.searchfilter').keyup(); }); $(".search-reset").on("click", function(){ $("#searchbox").val( ""); $('.searchfilter').keyup(); }); }); html edit
<!-- seach box --> <input id="searchbox" type="text" class="searchfilter" onblur="if(this.value == '')this.value='keyword(s)'" onfocus="this.value==this.defaultvalue?this.value='':null" value="keyword(s)" name="keyword"> <a href="#" class="search-btn" data-search="text1 ">search 1</a> <a href="#" class="search-btn" data-search="intro ">search 2</a> <a href="#" class="search-reset">reset</a>
Comments
Post a Comment