Overview

Documentation

Examples

List.js v2.3.1

Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.

Hi! I'm Jonny and the author of List.js.

I hope you like the lib. I’ve put a lot of hours into it! Feel free to follow me on Twitter and GitHub for news and donate a coffee for good karma ;)

Basic examples

Here is an example of a list with List.js applied. List.js can be used in three different ways. It can be on existing HTML, it can create it's own HTML or a combination of both methods.

Jonny Strömberg

1990

Jonas Arnklint

1985

Martina Elm

1986

Gustaf Lindqvist

1983

Apply List.js on existing HTML

<div id="users">

<!-- class="search" automagically makes an input a search field. -->
  <input class="search" placeholder="Search" />
<!-- class="sort" automagically makes an element a sort buttons. The date-sort value decides what to sort by. -->
  <button class="sort" data-sort="name">
    Sort
  </button>

<!-- Child elements of container with class="list" becomes list items -->
  <ul class="list">
    <li>
<!-- The innerHTML of children with class="name" becomes this items "name" value -->
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
    </li>
  </ul>

</div>
var options = {
  valueNames: [ 'name', 'born' ]
};

var userList = new List('users', options);

Apply List.js on existing HTML and then add items

<div id="users">

  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort
  </button>

  <ul class="list">
<!-- This, the first element in the list, will be used as template for new items. -->
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
  </ul>

</div>

var options = {
  valueNames: [ 'name', 'born' ]
};

// These items will be added to the list on initialization.
var values = [
  {
    name: 'Jonas Arnklint',
    born: 1985
  },
  {
    name: 'Martina Elm',
    born: 1986
  }
];

var userList = new List('users', options, values);

// It's possible to add items after list been initiated
userList.add({
  name: 'Gustaf Lindqvist',
  born: 1983
});

Make List.js create a list from scratch

<div id="users">

  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort
  </button>

  <ul class="list"></ul>

</div>
var options = {
  valueNames: [ 'name', 'born' ],
  // Since there are no elements in the list, this will be used as template.
  item: '<li><h3 class="name"></h3><p class="born"></p></li>'
};

var values = [
  {
    name: 'Jonny Strömberg',
    born: 1986
  },
  {
    name: 'Jonas Arnklint',
    born: 1985
  },
  {
    name: 'Martina Elm',
    born: 1986
  }
];

var userList = new List('users', options, values);

userList.add({
  name: 'Gustaf Lindqvist',
  born: 1983
});

More examples