List.js v1.2.0

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.

Overview

Documentation

Plugins

Examples

Basic example of List.js in action

<div id="users">

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

  <ul class="list">
    <li>
      <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);
<div id="users">

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

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
  </ul>

</div>

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

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

var userList = new List('example-list', options, values);

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



<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' ],
  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('example-list', options, values);

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

Jonny Strömberg

1990

Jonas Arnklint

1985

Martina Elm

1986

Gustaf Lindqvist

1983

More examples

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 ;)