Списки – один из самых распространенных и информативных элементов разметки. Часто возникает задача организации работы со списками на странице: поиск, сортировка, фильтрация. Все эти функции позволяют существенно повысить эффективность и удобство работы со списками.
В данной статье рассмотрим JS библиотеку List.js.
Возможности и преимущества
Основные функции:
- поиск,
- сортировка,
- фильтрация,
- возможность редактирования списков (добавление, удаление, изменение элементов).
Преимущества:
- легкий и быстрый,
- прост в использовании,
- уверенно обрабатывает большое количество (порядка нескольких тысяч) элементов.
Быстрый старт
Создадим необходимую разметку:
|
1 2 3 4 5 6 7 8 9 |
<div id="container"> <input class="search" placeholder="search"> <button class="sort" data-sort="list_item">sort</button> <ul class="list"> <li><p class="list_item">1</p></li> <li><p class="list_item">2</p></li> <li><p class="list_item">3</p></li> </ul> </div> |
На что необходимо обратить внимание:
- структура HTML – поиск и кнопка сортировки должны находиться внутри контейнера, содержащего список, при необходимости их можно вынести за пределы контейнера, смотреть здесь.
- классы элементов – элементы Input, button и ul должны принадлежать определенным классам, наименование этих классов можно изменить через параметр options, есть значения по умолчанию search, sort и list соответственно.
- data-sort – для работы кнопки сортировки необходимо задать параметр data-sort , в котором указать класс элемента , по значению которого будет происходить сортировка списка. В нашем случае – это параграф с классом list_item.
Первоначально плагин необходимо скачать или подключить через CDN, подключить list.js.
Для работы поиска и сортировки необходимо создать экземпляр объекта List:
|
1 |
new List(id/element, options, values); |
где id/element – это Id элемента содержащего список, options – набор параметров, необходимых для работы плагина, values – необязательный параметр, позволяет дополнительно добавлять элементы в список при инициализации.
Также необходимо задать параметры, для чего создадим переменную options:
|
1 |
var options = {valueNames: ['list_item']}; |
в которой укажем класс элементов списка, подлежащих процедуре поиска/сортировки, в нашем случае это будет параграф с классом list_item .
Обратите внимание, что при создании экземпляра класса List, в качестве первого параметра указывается идентификатор контейнера, содержащего список, а не его класс.
В итоге получаем следующий скрипт:
|
1 2 |
var options = {valueNames: ['list_item']}; var userList = new List('container', options); |
See the Pen WOV_listjs_search_sort_181107_0.1 by Paul (@1110000) on CodePen.
Дополнительные возможности
Изменение наименований классов
Свои классы для поиска, сортировки и списка можно назначить путем передачи через options параметров listClass, searchClass, sortClass:
|
1 2 3 4 5 |
var options = { listClass:'my_list', searchClass:'my_search', sortClass:'my_sort' }; |
Добавление элементов списка при инициализации скрипта
При инициализации скрипта можно добавить новые элементы, перечислив их в массиве:
|
1 2 |
var values=[{ list_item: '4'},{ list_item: '5'}]; var userList = new List('container', options,values); |
Вынос поля поиска за пределы элемента-контейнера, содержащего список
|
1 2 3 4 5 6 7 8 |
<input id="my_search" placeholder="search"> <div id="container"> <ul class="list"> <li><p class="list_item">1</p></li> <li><p class="list_item">2</p></li> <li><p class="list_item">3</p></li> </ul> </div> |
При такой структуре, необходимо прописать в скрипте обработчик события ввода в поле поиска, и передать вводимое значение методу search() :
|
1 2 3 4 5 6 |
<span class="keyword">var</span><span> userList = </span><span class="keyword">new</span><span> List(</span><span class="string">'container'</span><span>, options); $(</span><span class="string">'#my_search'</span><span>).on(</span><span class="string">'keyup'</span><span>, </span><span class="function"><span class="keyword">function</span><span class="params">()</span> { </span><span> </span><span class="keyword">var</span><span> search_input = $(</span><span class="keyword">this</span><span>).val(); listObj.search(search_input); }); </span> |
В статье перечислены основные моменты, которые нужно знать для начала работы с плагином. Данный плагин также позволяет редактировать списки (добавлять, удалять, редактировать элементы), работать с таблицами, поддерживает алгоритм нечеткого поиска (“fuzzy search”), позволяющего выполнять свои функции даже при наличии опечаток.
