Рады видеть Вас в блоге нашей студии! Здесь мы копим нужную, а иногда просто интересную информацию о создании сайтов.
Поиск, сортировка и фильтры для списков в HTML на jQuery
Простой мини-скрипт List.js размером 7 КБ добавляет интерактивности маркированным спискам в HTML. С помощью скрипта можно сделать удобный поиск, сортировку, редактирование списка с добавлением или удалением новых элементов (например, адресная книга на странице) и т.д. Чем-то напоминает Chosen, только там модифицировались выпадающие списки.
List.js — обычный JavaScript, который не требует jQuery, работает без проблем во всех браузерах. Пару примеров см. здесь и здесь.
List.js опубликован под открытой лицензией MIT.
Например, вот функция создания нового списка на веб-странице по нажатию кнопки пользователем.
HTML
<div id="hacker-list">
<ul class="list"></ul>
</div>
<div style="display:none;">
<!-- A template element is needed when list is empty, TODO: needs a better solution -->
<li id="hacker-item">
<h3 class="name"></h3>
<p class="city"></p>
</li>
</div>JavaScript
var options = {
item: 'hacker-item'
};
var values = [
{ name: 'Jonny', city:'Stockholm' }
, { name: 'Jonas', city:'Berlin' }
];
var hackerList = new List('hacker-list', options, values);Кнопки для поиска и сортировки в списке.
HTML
<div id="hacker-list">
<input class="search" />
<span class="sort" rel="name">Sort by name</span>
<span class="sort" rel="city">Sort by city</span>
<ul class="list">
<li>
<h3 class="name">Jonny</h3>
<p class="city">Stockholm</p>
</li>
<li>
<h3 class="name">Jonas</h3>
<p class="city">Berlin</p>
</li>
</ul>
</div>Javascript
var options = {
valueNames: [ 'name', 'city' ]
};
var hackerList = new List('hacker-list', options);В общем, всё просто. Скачивайте и смотрите сами.