Filtrar, ordenar y buscar en listas con Javascript

Una buena idea a la hora de trabajar con listas extensas es la de permitir de forma simple el filtrado, ordenamiento y búsqueda dentro de los datos contenidos.

Para lograrlo tenemos varias opciones, desde desarrollar nosotros mismos una solución utilizando por ejemplo un lenguaje del lado del servidor, o bien utilizar List.js, un código JavaScript que nos brinda de forma simple todas las capacidades que comente al comienzo de esta entrada, de una manera muy rápida y fácil de implementar.

Filtrar, ordenar y buscar en listas con Javascript

List.js es una solución que funciona perfectamente en los navegadores más modernos, con un peso de apenas 7 KB. El Javascript no solo permite realizar operaciones básicas referentes al filtrado de la información sino que también contempla la posibilidad de agregar, remover y actualizar elementos directamente desde la lista y sin complicaciones.

Ejemplo de uso:

HTML:

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

JAVASCRIPT:

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

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

Otro detalle importante de Listjs es que cuenta con la posibilidad de trabajar por medio de plantillas, una excelente noticia para aquellos que nos gusta mantener el código lo más limpio posible.

En el sitio oficial de Listjs pueden encontrar una serie de ejemplos. Algunos complejos e interesantes, el que más me gusto es uno que permite filtrar listas compuestas por un título, una imagen y una descripción, algo que resulta interesante para sitios que muestran información distribuida de forma similar a, por ejemplo, un sitio de subastas.

Web: List.js

Categorizado en: