Скачать jquery searchable - jquery searchable Загрузка исходного кода

jquery searchable

Другой исходный код

vents

Скачать

Плагин jQuery с возможностью поиска

Последняя версия: v1.1.0 (Просмотреть журнал изменений)

Маленький, быстрый плагин jQuery для поиска по элементам по мере ввода. Этот плагин создан и поддерживается Stidges (Twitter | Github).

Функции

Легкий . Этот плагин минимизирован и заархивирован всего на ~1 КБ!
Быстрый . Этот плагин оптимизирован для быстрого поиска без задержек даже в больших наборах элементов.
Несколько типов поиска . Этот плагин предоставляет три различных типа поиска «из коробки»! Нечеткое соответствие, строгое соответствие (с учетом регистра) и соответствие по умолчанию (без учета регистра).
Автоматическое чередование строк . При поиске по таблице строки, не совпадающие с ними, скрываются. При использовании фреймворка CSS, такого как Bootstrap, это может испортить чередование таблиц. Этот плагин позволяет вам определять CSS, который будет применяться к нечетным и четным строкам, и обновлять их во время поиска.
Пользовательское отображение/скрытие . Вы можете определить пользовательские функции для отображения и скрытия элементов во время поиска.
Ищите что угодно . Этот плагин не ограничен для использования в таблицах, можно использовать любой набор элементов, в которых есть «строки» со «столбцами» внутри них.

Демо

Нажмите здесь, чтобы просмотреть демо-версию этого плагина в действии (размещено на Bootsnipp)

Начиная

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

После загрузки этого плагина включите его в свой HTML-файл после загрузки jQuery:

 < script src =" jquery.js " > </ script >
< script src =" jquery.searchable.js " > </ script >

Примечание . Если вы хотите поддерживать старые браузеры, такие как <IE9, вы можете использовать jquery.searchable-ie.js вместо jquery.searchable.js . Эта версия включает полифилл для функции Array.prototype.reduce и поэтому немного больше (пару сотен байт).

После этого вы можете просто инициализировать плагин на нужном элементе. В этом примере используется таблица с идентификатором «table». По умолчанию плагин использует вход с идентификатором «поиск» (о том, как изменить это, читайте в разделе «Конфигурация» ниже):

 $ ( '#table' ) . searchable ( ) ;

Конфигурация

Этот плагин предоставляет следующие параметры конфигурации:

Вариант	Значение по умолчанию	Описание
селектор	`'tbody tr'`	Определяет основной селектор jQuery внутри элемента, на котором инициализируется плагин. При этом выбираются элементы контейнера для отображения или скрытия, например `tr` в таблице или `div.your-special-class` в элементе с возможностью поиска.
ребенокСелектор	`'td'`	Определяет дочерний селектор внутри «селектора», определенного выше. При этом выбираются элементы, доступные для поиска, внутри элемента «селектор», например `td` или `.searchable` .
поле поиска	`'#search'`	Элемент ввода, который используется для входного фильтра поиска.
полосатый	`false`	Определяет, является ли элемент чередующимся и должен ли он быть перераспределен при поиске ( `true` или `false` ).
нечетная строка	`{ }`	Определяет объект CSS, который будет применяться к нечетным строкам (если для `striped` установлено значение `true` ).
дажеРоу	`{ }`	Определяет объект CSS, который будет применяться к четным строкам (если для `striped` установлено значение `true` ).
скрывать	`function`	Позволяет определить пользовательскую функцию скрытия. Эта функция принимает один параметр — скрываемый элемент (строку). По умолчанию он будет использовать `elem.hide()` чтобы скрыть строку.
показывать	`function`	Позволяет определить пользовательскую функцию показа. Эта функция принимает один параметр — скрываемый элемент (строку). По умолчанию для отображения строки будет использоваться `elem.show()` .
Тип поиска	`'default'`	Определяет средство сопоставления, которое будет использоваться при поиске. Допустимые значения: `'fuzzy'` , `'strict'` и `'default'` .
onSearchActive	`false`	Позволяет определить функцию, которая будет вызываться при активном поиске. Эта функция будет вызываться всякий раз, когда пользователь вводит данные для поиска, и данные для поиска не пусты. Элемент, доступный для поиска, и поисковый запрос будут переданы в функцию.
onSearchEmpty	`false`	Позволяет определить функцию, которая будет вызываться, когда поле поиска пусто. Эта функция будет вызываться один раз, когда входные данные поиска пусты или очищены. Элемент, доступный для поиска, будет передан в функцию.
onSearchFocus	`false`	Позволяет вам определить функцию, которая будет вызываться, когда ввод поиска находится в фокусе. `this` контекст этой функции будет элементом ввода поиска.
onSearchBlur	`false`	Позволяет определить функцию, которая будет вызываться, когда ввод поиска размыт. `this` контекст этой функции будет элементом ввода поиска.
ClearOnLoad	`false`	Определяет, должны ли данные поиска очищаться при загрузке страницы ( `true` или `false` ).

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

В этом примере для настройки плагина используются показанные выше конфигурации:

 $ ( '#element' ) . searchable ( {
    selector      : '.row' ,
    childSelector : '.column' ,
    searchField   : '#mySearchInput' ,
    striped       : true ,
    oddRow        : { 'background-color' : '#f5f5f5' } ,
    evenRow       : { 'background-color' : '#fff' } ,
    hide          : function ( elem ) {
        elem . fadeOut ( 50 ) ;
    } ,
    show          : function ( elem ) {
        elem . fadeIn ( 50 ) ;
    } ,
    searchType    : 'fuzzy' ,
    onSearchActive : function ( elem , term ) {
        elem . show ( ) ;
    } ,
    onSearchEmpty : function ( elem ) {
        elem . hide ( ) ;
    } ,
    onSearchFocus : function ( ) {
        $ ( '#feedback' ) . show ( ) . text ( 'Type to search.' ) ;
    } ,
    onSearchBlur : function ( ) {
        $ ( '#feedback' ) . hide ( ) ;
    } ,
    clearOnLoad : true
} ) ;

Журнал изменений

Версия 1.0.0:

Первоначальный выпуск.

Версия 1.1.0:

Добавлены некоторые события, которые позволяют вызывать пользовательские функции во время жизненного цикла поиска: onSearchActive, onSearchEmpty, onSearchFocus, onSearchBlur (дополнительную информацию см. в конфигурации).
Добавлен clearOnLoad , который позволяет очищать ввод поиска при загрузке/обновлении страницы.

Вклад и проблемы

Пожалуйста, не стесняйтесь сообщать о любых проблемах или запросах на извлечение, они более чем приветствуются. При отправке сообщения укажите номер версии и подробно опишите проблему, чтобы ее можно было решить как можно скорее!