jquery instant search based on keywords

Question

This plugin uses regular expression to sort content, in real-time, based on your search input. Right now the script is searching just as you type.

here is the 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 I want to do is to create few buttons like : "text1" "text2" and when you click on them to work to search for "text1" without having to type it. Any suggestions on how to do this ? this is how the script works: jsfiddle

Thank you!

Answer 1

i forked your fiddle and added the functionality you 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>