jQuery EasySearch - простая фильтрация элементов

jQuery EasySearch - небольшой плагин для легкой фильтрации элементов по вводимому значению из текстового поля input.

Данный плагин я разработал вчера для своих нужд. Но, постепенно дорабатывая простой класс для поиска элементов, я решил реализовать из класса, целый плагин. На момент разработки плагина, я хотел сделать его максимально простым по размеру и применению.

EasySearch умеет фильтровать данные из элементов <table> и <ul>. Его главной особенностью является гибкость в применении не только к выше описанным элементам, но и к любым элементам, имеющих дочерние элементы.

• Размер плагина (без сжатия): 1 кб.
• Размер плагина (с жатием): 791 байт.

# Как использовать плагин?

В первую очередь, подключим плагин jQuery EasySearch и конечно jQuery (желательно перед </body>), без него нам не обойтись.

В качестве примера, мы возьмем простой <input>. Плагин будет фильтровать элементы из <ul> в которых присутствует вводимое значение из <input>.

<ul>
    <li>Вася 1</li>
    <li>Вася 2</li>
    <li>Миша 1</li>
    <li>Миша 2</li>
    <li>Коля 1</li>
    <li>Коля 2</li>
</ul>
<input type="text" placeholder="Введите текст...">

Далее, применяем плагин на <input>

$('input').jSearch({ 
    selector  : 'ul',
    child : 'li',
    minValLength: 0,
    Found : function(elem, event){
            $(elem).show();
    },
    NotFound : function(elem, event){
            $(elem).hide();
    }
});

Думаю, все очень просто и ясно. С помощью внутренних функций Found() и NotFound(), вы решаете, что делать с элементом, который содержит в себе значение из <input>.

• selector - основной элемент, в котором находятся дочерние элементы для поиска.
• child - дочерний элемент, где производится поиск.
• minValLength = 3 - минимальное количество символов для начала фильтрации (по умолчанию = 3)
• Found(elem) - вызывается если значение элемента соответствует условию ( elem - элемент соответствующий условию )
• NotFound(elem) - вызывается если значение элемента не соответствует условию ( elem - элемент который не соответствует условию )
• Before(t) - вызывается перед фильтрацией ( t - ссылка на объект input )
• After(t) - вызывается после фильтрации ( t - ссылка на объект input )

# Разберем еще немного примеров

Второй пример у нас будет связан с таблицей. Мы будем фильтровать родительский элемент <tr> по искомому значению из <td>.

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

Как вы можете заметить, я использую еще две функции Before() и After().

Перед фильтрацией элементов, функция Before() во всех элементах <tr> убирает значение из атрибута find. Тем самым, при скрытии элемента методом show(), обработчик понимал, в какой именно строке уже найдено значение. Если атрибут find имеет значение true, то этот родительский элемент <tr> скрываться не будет даже в том случае, если в двух других <td> введенного значения не найдено.

После того, как фильтрация прошла, функция After() проверяет, есть ли что-нибудь в <input>. Если поле пустое, то все строки снова отображаются методом hide().

Если мы просто укажем $(elem).hide();, то скроется сам элемент <td>. Для того, чтобы скрыть полностью всю строку , надо обратиться к родительскому элементу <tr> из <td>, методом parent().

В архиве есть два примера, можете рассмотреть более детально. Так же я создал репозиторий для данного плагина: jQuery easySearch GitHub.

Я конечно не профессиональный JS-программист и если вы заметили какой-нибудь баг или быдлокод, пишите в комментариях или мне в: Вконтакте или Facebook.