List.js

[ { feature: "sort" }, { feature: "search" }, { feature: "filter" } ]

Do you want a 3 KB cross-browser native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable? Yeah!
Do you also want the possibility to add, edit and remove items by dead simple templating? Hell yeah!

* Warning: beta release, bugs and bees will be present.

Download 3 KB minified & gzip

Want to take a sneak peak at the source or maybe contribute with something cool?

Check out github.com/javve/list
...and follow twitter.com/javve

Look here! This is an example of what List.js can do

Sort features
  • Search Search through all items.
  • Sort Sort lists by value that you choose.
  • Filter Write your own filter functions.

Add List.js-functionality to existing list

HTML


<div id="example-list">
    <input class="search" />
    <span class="sort" data-sort="feature">Sort features</span>
    <ul class="list">
       <li>
           <span class="feature">Search</span>
           <small class="description">Search through all items.</small>
       </li>
       <li>
           <span class="feature">Sort</span>
           <small class="description">Sort lists by value that
               you choose.</small>
       </li>
       <li>
           <span class="feature">Filter</span>
           <small class="description">
                Write your own filter functions.
            </small>
       </li>
       <li>
           <span class="feature">Add</span>
           <small class="description">Add items on the fly.</small>
       </li>
       <li>
           <span class="feature">Get</span>
           <small class="description">Get item based on value.</small>
       </li>
       <li>
           <span class="feature">Update</span>
           <small class="description">Update items as you go.</small>
       </li>
       <li>
           <span class="feature">Remove</span>
           <small class="description">
                Remove items whenever you feel like.
            </small>
       </li>
    </ul>
</div>

JavaScript


var options = {
    valueNames: [ 'feature', 'description' ]
};

var featureList = new List('example-list', options);

Add List.js to list, and then add new items

HTML


<div id="example-list">
    <input class="search" />
    <span class="sort" data-sort="feature">Sort features</span>
    <ul class="list">
       <li>
           <span class="feature">Search</span>
           <small class="description">Search through all items.</small>
       </li>
       <li>
           <span class="feature">Sort</span>
           <small class="description">Sort lists by value that
               you choose.</small>
       </li>
       <li>
           <span class="feature">Filter</span>
           <small class="description">Write your own filter functions.</small>
       </li>
    </ul>
</div>

JavaScript


var options = {
    valueNames: [ 'feature', 'description' ]
};

var values = [
    { feature: 'Add', description:'Add items on the fly.' }
    , { feature: 'Get', description:'Get item based on value.' }
    , { feature: 'Update', description:'Update items as you go.' }
];

var featureList = new List('example-list', options, values);

var newFeature = {
    feature: 'Remove'
    , description:'Remove items whenever you feel like.'
};

featureList.add(newFeature);
More script and css style : www.htmldrive.net