How to use list.js: search, sort and filter HTML lists

What list.js does and who it is for

List.js lets a web page search, sort and filter items that are already displayed in an HTML element such as a div, ul or table. The project describes itself as simple, small and free of dependencies, and says it can handle thousands of items in the browser.

It suits web developers who want interactive filtering on a page that already shows its data. It is a code library, so you need to write JavaScript to use it. It is not a no-code tool.

• Good fit: adding search or sorting to an existing HTML table or list
• Good fit: projects that want a small library with no dependencies
• Good fit: sites that must support older browsers, since the README lists IE9+
• Not a fit: very large server-side datasets, since the README only mentions thousands of items in the browser

Install list.js with npm

The README gives npm as the install method. You need Node.js or another package manager such as npm installed to use this route.

The README also lists Bower, a CDN link on CDNJS and a direct download of the compressed or uncompressed file. Pick the one that matches how your project is built.

Prepare your existing HTML

List.js is built to be applied to markup you already have. The README lists support for tables, lists and elements such as div and ul. Give the element and its items the structure your page already uses, then point the library at that element.

The official documentation at listjs.com/docs covers the options and the List API. Read those pages before writing your setup code, since the option names and method signatures are defined there.

Add search, sort and filter

The README lists three core features: search, sort and filter. Each has its own section in the List API documentation at listjs.com/docs/list-api. Start with search, since it is the most common need, then add sorting and filtering once the basic list works.

The project also provides examples you can copy from: an existing list, an existing list with add, fuzzy search, pagination, searching a specific column, filtering in a range, and showing a message when there are zero results.

• Existing list: https://listjs.com/examples/existing-list
• Fuzzy search: https://listjs.com/examples/fuzzy-search
• Pagination: https://listjs.com/examples/pagination

Add, edit and remove items

The README says list.js has a simple templating system that lets you add, edit and remove items. Use the Add, get, remove example and the Item API documentation to see how these operations are written.

Check the documentation for the exact method names before you rely on them, because this guide does not list them.

Compare list.js with similar libraries

The README names DataTables, Fuse.js and Tablesorter as comparable projects. List.js is aimed at adding interactivity to HTML you already have, with no dependencies. Choose the library whose scope matches your page: a full table system, a fuzzy search engine, or a lightweight helper.