List.js: aplica filtros, ordenamiento y búsquedas a elementos HTML estáticos

List.js es una pequeña e increíblemente rápida biblioteca de javascript que te permite aplicar filtros, ordenamiento e incluso búsquedas a elementos que no son cargados desde una base de datos, es decir, HTML estático.

Con List.js es posible aplicar estas propiedades no solo a elementos existentes, si no que también es posible agregar nuevos elementos de manera dinámica a través de plantillas HMTL.

Modos de uso

Usando una lista existente

<div id="hacker-list">
  <ul class="list">
    <li>
       <h3 class="name">Jonny</h3>
       <p class="city">Stockholm</p>
    </li>
    <li>
      <h3 class="name">Jonas</h3>
      <p class="city">Berlin</p>
    </li>
  </ul>
</div>

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

var hackerList = new List('hacker-list', options);

Crear lista al iniciar la biblioteca

<div id="hacker-list">
    <ul class="list"></ul>
</div>

var options = {
  item: '<li><h3 class="name"></h3><p class="city"></p></li>'
};

var values = [
  { name: 'Jonny', city:'Stockholm' }
  , { name: 'Jonas', city:'Berlin' }
];

var hackerList = new List('hacker-list', options, values);

Estos son solo algunas de las formas en que es posible usar la biblioteca, para ver una lista mas completa visita la documentación

Ejemplo

El siguiente es un ejemplo que se puede encontrar en la página de la biblioteca junto con otros ejemplos con distintos casos de uso.

See the Pen oEezp by Jonny Strömberg (@javve) on CodePen.15465

Página: http://www.listjs.com/