jquery live search callback function

Question

This plugin uses regular expression to sort content, in real-time, based on your search input.

I've created few buttons for search like this:

    <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>

and a snippet of the code :

       $(".search-btn").on("click", function(){
       $("#searchbox").val( $(this).data("search") );
       $('.searchFilter').keyup();
       });             

       $(".search-reset").on("click", function(){
       $("#searchbox").val( "");
       $('.searchFilter').keyup();
   });

What I want to do is when "Search 1" is clicked to append a class called let's say "visible-elements" to all the elements which are visible after that search is performed and after call a function.

This is a good example of what I'm trying to achieve applied to another search plugin but it shows the concept of what I'm trying to do :

$('input#id_search').quicksearch('div.member', {
show: function () {
$(this).addClass('visible-elements');
 },
hide: function() {
$(this).removeClass('visible-elements');
},
onAfter: function() {
$container.isotope({ filter: 'visible-elements'});
}
});

The issue is that I don't know how to make this work in my actual structure, any suggestions are welcome.

here is a working fiddle example.

here is the testing website

jquery live search callback function

0 Answers0