Creating Rich Lists with lists.js

Client side list management is to DHTML as logging is to AOP. Updating, filtering, sorting, and searching are frequent use cases for client-side developers building richer interfaces. What is surprising, then, is just how horribly wrong it often goes.

List.js avoids the common pitfalls of some of the more well known plugins, such as DataTables and JQuery autocomplete. It has a clean interface, simple API, and uses the markup you create, instead of injecting its own.

The big heavyweight in client side data management tools is DataTables. DataTables is very powerful, but it adds a lot of markup and has millions of configuration options. Therefore, for anything short of the most advanced use-cases, the amount of time configuring and writing CSS takes away from the time saved in adding richer data manipulation.

Another popular library is JQuery Autocomplete. While vastly simpler than DataTables, it is still suffers from some quirks, especially around empty lists.

What first attracted me to List.js is that it doesn’t add its own markup, but uses standard HTML markup. It also uses conventions to reduce the amount of configuration.

My need was to create a filter on up to 200 elements. Since the number of elements was small, I had them all rendered on the HTML page. List.js will associate an input element as the search box when both the list and the input element are contained within the same parent div.

<div id="listContainer">
    <div class="search">
        <input type="text">
    </div>
    
    <ul class="list">
        <li>apple</li>
        <li>pear</li>
        <li>orange</li>
    </ul>
</div>

That is all the required markup. Since List.js does not add any markup, there is no need for any CSS beyond the base style sheet.

The JavaScript is also straight forward.

var myList = new List("listContainer", {});

Resetting the list back to the original state is

mylist.search("");

The simplicity of list.js makes it a useful addition to the JavaScript toolbox.

Related Posts: