Filtrify.js: un plugin en jQuery y HTML5 para filtrar listados utilizando tags

Filtrify es un plugin de filtrado de tags avanzado, que sirve para buscar dentro de listados utilizando una o múltiples etiquetas (tags) y categorías, y además nos muestra la cantidad de ítems que hay dentro de cada una.

Para almacenar la metadata, Filtrify utiliza el atributo “data” de HTML5. Todo lo que debemos hacer es incluir un data attribute en cada ítem de la lista con las tags respectivas. Esta será nuestra metadata. En caso de tener más de una categoría o tag, simplemente hay que incluirlas en otro atributo “data”, ya que podemos utilizar todas las que queramos.

Lo que el plugin hace es revisar todos los data attributes que han sido incluidos y crear un menú de búsqueda que los contenga a todos.

¿CÓMO INCLUIR UN .JS EN EL <HEAD>?

Para que Filtrify funcione tenemos que linkear antes que nada algunos archivos dentro de la etiqueta <head> de nuestro index.

<link rel="stylesheet" href="css/filtrify.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/fitrify.js"></script>

Tenemos que descargar los archivos filtrify.js y filtrify.css y subirlos a nuestro servidor.

Implementación del javascript

Iniciamos el plugin con el siguiente código:

<script type="text/javascript">
$(function() {
 $.filtrify("contenedor", "filtro");
});
</script>

Es importante señalar que contenedor y filtro son las id que veremos en el HTML a continuación. Si decidimos cambiarlas debemos recordar que hay que reemplazarlas en ambos lugares.

Implementación del HTML

Como nos explican en la página del proyecto Filtrify, es muy sencillo entender y configurar adecuadamente el HTML y no tendremos problemas siempre que cuidemos estos cinco puntos:

  • Insertar las tags separadas por una coma y un espacio tras la coma: tag1, tag2
  • Las etiquetas que sean iguales siempre tienen que escribirse de la misma manera, ya que el plugin diferencia las mayúsculas: tag1 no es lo mismo que Tag1
  • Si alguna tag llevara una coma en su nombre, debemos incluir \ (una barra invertida antes y después de la coma: la tag etiqueta, ejemplo debe escribirse etiqueta\,\ ejemplo
  • En caso de tener más de una categoría de tags, emplear siempre la misma secuencia de categorías.
  • Tratar de no repetir las mismas tags dentro de la categoría.
Tomemos un ejemplo con múltiples categorías. El atributo data- definirá el nombre que aparecerá en el menú de filtro.
<div id="filtro"></div>
<ul id="contenedor">
 <li data-genero="ciencia ficción" data-protagonistas="Mark Hamill, Harrison Ford, Carrie Fisher" data-director="George Lucas"> Star Wars: A new Hope </li>
 <li data-genero="aventura, ciencia ficción" data-protagonistas="Sam Neill, Laura Dern" data-director="Steven Spielberg"> Jurassic Park </li>
 <li data-genero="aventura, acción, thriller, crimen, misterio" data-protagonistas="Robert Downey Jr., Jude Law, Rachel McAdams" data-director="Guy Ritchie"> Sherlock Holmes </li>
 <li data-genero="terror, misterio" data-protagonistas="Johnny Depp, Christina Ricci" data-director="Tim Burton"> Sleepy Hollow </li>
</ul>

Entonces si queremos emplear este filtro para ordenar jugadores de football, podríamos utilizar: data-edaddata-equipodata-pais y nuestro menú de filtro mostraría “edad”, “equipo”, “pais”.

En este caso empleamos un ejemplo de múltiples categorías de tags, pero en caso de querer utilizar una categoría de tags única solamente debemos emplear un data attribute, por ejemplo data-pais.

Para poder aprender todas las funciones que tiene este plugin desarrollado por Luis Almeida pueden seguir el link de descarga a continuación.

Scroll to top