Поиск, сортировка и фильтры для списков в HTML

Простой мини-скрипт 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);

В общем, всё просто. Скачивайте и смотрите сами.