Submit your widget

jQuery plug-in for filtering elements with user input

Created 8 months ago   Views 4296   downloads 516    Author Archakov06
jQuery plug-in for filtering elements with user input
View DemoDownload 6.8 KB
18
Share |

A jQuery plug-in for filtering elements with user input.

Example #1: UL

  $('input').jSearch({ 
        selector  : 'ul',
        child : 'li div.header',
        minValLength: 0,
        Found : function(elem){
            $(elem).parent().parent().show();
        },
        NotFound : function(elem){
            $(elem).parent().parent().hide();
        },
        After : function(t){
            if (!t.val().length) $('ul li').show();
        }
    });

Example #2: Table

 $('input').jSearch({ 
        selector  : 'table',
        child : 'tr > td',
        minValLength: 0,
        Before: function(){
            $('table tr').data('find','');
        },
        Found : function(elem){
            $(elem).parent().data('find','true');
            $(elem).parent().show();
        },
        NotFound : function(elem){
            if (!$(elem).parent().data('find'))
            $(elem).parent().hide();
        },
        After : function(t){
            if (!t.val().length) $('table tr').show();
        }
    });

Options

  • selector The selector that will occur search for child elements
  • child The child element that will be searched
  • minValLength The minimum number of characters to search
  • onFound The function is called if there is a match
  • onNotFound The function is called if there is no match
  • onBefore Function to call before trigger is called
  • onAfter Function to call after trigger is called

Read more:https://github.com/Archakov06/jQuery-easySearch