--- layout: default title: Automagical Searching + Sorting ---

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:

Searching


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

Sorting


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
  }