Automagical Searching + Sorting

It is easy to add search input and sort buttons with just a few classes and attributes in your HTML. ‘Automagical’ because List.js registers the event handlers, searches/sorts and updates the list for you:


  • class String. *required
    The default class search is how List.js finds your writable search field. If you change it also set options.searchClass.

    Alternatively, using fuzzy-search here will switch to the Fuzzy Search function.

  • type String. *required
    The default input type search is similar to using text, but web browsers may render it slightly differently: see Either type will work with List.js.

<input type="search" class="search" placeholder="normal search"> or
<input type="search" class="fuzzy-search" placeholder="fuzzy search!">


  • class String. *required
    The default class sort is how List.js finds clickable sort buttons. If you change it also set options.sortClass.

  • data-sort String. *required
    This attribute on a clickable sort button should match the column name passed to List.js in options.valueNames.

  • data-order String
    Set to asc or desc to enforce that sorting order for a column. The user won't be able to change the order, and any data-default-order attribute is ignored.

  • data-default-order String, default: "asc"
    Set to desc to change the initial sorting order for a column. Subsequent clicks will toggle the sorting order between ascending/descending, as usual.

  • data-insensitive Boolean, default: true
    Set to false for case-sensitive sorting of that column.

Sort by: 
<span class='sort' data-sort='name'>Name</span> or 
<span class='sort' data-sort='born' data-default-order='desc'>Born in Year</span> or 
<span class='sort' data-sort='city'>City</span>

The CSS classes asc and desc are added when a sort button is clicked on, so List.js can show which column is currently sorted. For example, using this CSS sets a yellow background with ⬆ or ⬇ added after the button text:

.sort.asc, .sort.desc {
  background-color: yellow;
.sort.asc::after {
  content: "\002B06";
  padding-left: 3px;
.sort.desc::after {
  content: "\002B07";
  padding-left: 3px