jQuery EasySearch - небольшой плагин для легкой фильтрации элементов по вводимому значению из текстового поля input.
Данный плагин я разработал вчера для своих нужд. Но, постепенно дорабатывая простой класс для поиска элементов, я решил реализовать из класса, целый плагин. На момент разработки плагина, я хотел сделать его максимально простым по размеру и применению.
EasySearch умеет фильтровать данные из элементов <table> и <ul>. Его главной особенностью является гибкость в применении не только к выше описанным элементам, но и к любым элементам, имеющих дочерние элементы.
В первую очередь, подключим плагин jQuery EasySearch и конечно jQuery (желательно перед </body>), без него нам не обойтись.
В качестве примера, мы возьмем простой <input>. Плагин будет фильтровать элементы из <ul> в которых присутствует вводимое значение из <input>.
_10<ul>_10 <li>Вася 1</li>_10 <li>Вася 2</li>_10 <li>Миша 1</li>_10 <li>Миша 2</li>_10 <li>Коля 1</li>_10 <li>Коля 2</li>_10</ul>_10<input type="text" placeholder="Введите текст...">
Далее, применяем плагин на <input>
_11$('input').jSearch({ _11 selector : 'ul',_11 child : 'li',_11 minValLength: 0,_11 Found : function(elem, event){_11 $(elem).show();_11 },_11 NotFound : function(elem, event){_11 $(elem).hide();_11 }_11});
Думаю, все очень просто и ясно. С помощью внутренних функций Found() и NotFound(), вы решаете, что делать с элементом, который содержит в себе значение из <input>.
Второй пример у нас будет связан с таблицей. Мы будем фильтровать родительский элемент <tr /> по искомому значению из <td />.
_19$('input').jSearch({_19 selector : 'table',_19 child : 'tr > td',_19 minValLength: 0,_19 Before: function(){_19 $('table tr').data('find','');_19 },_19 Found : function(elem, event){_19 $(elem).parent().data('find','true');_19 $(elem).parent().show();_19 },_19 NotFound : function(elem, event){_19 if (!$(elem).parent().data('find'))_19 $(elem).parent().hide();_19 },_19 After : function(t){_19 if (!t.val().length) $('table tr').show();_19 }_19});
Как вы можете заметить, я использую еще две функции Before() и After().
Перед фильтрацией элементов, функция Before() во всех элементах <tr /> убирает значение из атрибута find. Тем самым, при скрытии элемента методом show(), обработчик понимал, в какой именно строке уже найдено значение. Если атрибут find имеет значение true, то этот родительский элемент <tr /> скрываться не будет даже в том случае, если в двух других <td /> введенного значения не найдено.
После того, как фильтрация прошла, функция After() проверяет, есть ли что-нибудь в <input>. Если поле пустое, то все строки снова отображаются методом hide().
Если мы просто укажем $(elem).hide();, то скроется сам элемент <td />. Для того, чтобы скрыть полностью всю строку
<tr /> из <td />, методом parent().
В архиве есть два примера, можете рассмотреть более детально. Так же я создал репозиторий для данного плагина: jQuery easySearch GitHub.
Я конечно не профессиональный JS-программист и если вы заметили какой-нибудь баг или быдлокод, пишите в комментариях или мне в: Вконтакте или Facebook.