Search, sort and filter for lists in HTML

A simple 7kb List.js mini-script adds interactivity to bulleted HTML lists. Using the script, you can make a convenient search, sorting, editing the list with adding or deleting new items (for example, address book on the page), etc. Something like Chosen , only there the drop-down lists were modified.

List.js is plain javascript that does not require jQuery, it works without problems in all browsers. See a couple of examples here and here .

List.js is published under the open MIT license.

For example, here is the function to create a new list on a web page when a user clicks a button.
')
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); 

Buttons for searching and sorting in the list.

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); 

In general, everything is simple. Download and see for yourself.