quicksearch

Сегодня мы с вами познакомимся с jQuery-плагином quicksearch. Этот плагин, перебирая заранее подготовленный список элементов и их содержимое, проверяет наличие в них искомых слов

Использование

$(input_selector).quicksearch(
   элементы_для_поиска, 
   настройки
);

Пример на строках таблицы

/* Пример формы */
<form>
    <input type="text" id="search">
</form>

/* Пример таблицы */
<table>
    <tbody>
        <tr>
            <td>Тестовая ячейка</td>
            <td>Другая тестовая ячейка</td>
        </tr>
    </tbody>
</table>

<script src="jquery.js"></script>
<script src="jquery.quicksearch.js"></script>
<script>
    $('input#search').quicksearch('table tbody tr');
</script>

Пример на <th> элементах таблицы

$('input#search').quicksearch('table tbody tr', {
    selector: 'th'
});

Пример использования с JavaScript

var qs = $('input#id_search_list')
   .quicksearch('ul#list_example li');

$('ul#list_example').append(
   '<li>Загружено с помощью Ajax</li>'
);

qs.cache();

Пример с использованием Ajax

var qs = $('input#search')
   .quicksearch('table tbody tr');

$.ajax({
    'type': 'GET',
    'url': 'index.html',
    'success': function (data) {
        $('table tbody tr').append(data);
        qs.cache();
    }
});

Настройки quicksearch

delay

Задержка запуска в миллисекундах

selector

Селектор запросов проверки одноуровневых элементов

stripeRows

Массив классов имен, находящихся в каждом ряду

loader

Селектор запросов поиска загружаемого элемента

noResults

Селектор запросов показа отсутствия результатов поиска

bind

Событие, к которому привязан триггер

onBefore

Функция, вызываемая до вызова триггера

onAfter

Функция, вызываемая после вызова триггера

show

Функция, которая добавляет стили совпадающим элементам

hide

Функция, которая добавляет стили несовпадающим элементам

prepareQuery

Функция, превращающая текст из input_selector в запрос, используемый функцией 'testQuery'

testQuery

Функция, которая вызывается, если указанный элемент должен быть скрыт. Она принимает 3 аргумента:

запрос, подготовленный 'prepareQuery'
разделитель текста из 'selector'
элемент, который должен быть скрыт

Функции обратного вызова

Функции всегда вызываются (call) или применяются (apply), поэтому все кроме this являются объектрами плагинов. Например:

$('input#search').quicksearch('table tbody tr', {
    'delay': 100,
    'selector': 'th',
    'stripeRows': ['odd', 'even'],
    'loader': 'span.loading',
    'noResults': 'tr#noresults',
    'bind': 'keyup keydown',
    'onBefore': function () {
        console.log('on before');
    },
    'onAfter': function () {
        console.log('on after');
    },
    'show': function () {
        $(this).addClass('show');
    },
    'hide': function () {
        $(this).removeClass('show');
    }
    'prepareQuery': function (val) {
        return new RegExp(val, "i");
    },
    'testQuery': function (query, txt, _row) {
        return query.test(txt);
    }
});