List.js

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

Do you want a 3 KB cross-browser native JavaScript that makes your plain HTML lists/tables 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!

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