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

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.
ПОДПИШИСЬ НА ОБНОВЛЕНИЯ
Только новые публикации и никакого мусора.