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>

Answer 2

You can set the value of the search box to the value you for which want to automatically search, and then call its keyup() event to force it to search.

For example, you can create an input like this:

<input type="button" value="Intro" class="searchButton">

And then in $(document).ready() you can bind the following function to the click event:

$('.searchButton').click(function (eventObject) {
    $('.searchFilter').val(eventObject.target.value).keyup();
});

This will automatically search for the term you listed in the button's value attribute.

Here is a working example: http://jsfiddle.net/gvH77/

Answer 3

I found this on CodeCanyon and it is either exactly what you need, or its what you ended up actually making from the answers to this question: http://codecanyon.net/item/simple-content-search/1850151?ref=arctic_ark