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

  • воскресенье, 29 мая 2016 г., 16:40:25

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

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

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

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

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

В первую очередь, подключим плагин 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>.

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