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

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

qt - Errors in generated MOC files for QT5 from cmake -