Filtrify es un plugin jQuery que funciona de forma conjunta con HTML5 y que podemos utilizar para el filtrado dinámico de contenido por medio de etiquetas.
El plugin esta inspirado en Chosen, uno de los plugins más utilizados a la hora de modificar tanto el aspecto como el comportamiento de los select múltiples.
Este genial plugin jQuery utiliza los pseudo-elementos “:before” y “:after” para determinar la organización de los elementos según que etiquetas sean seleccionadas, también hace uso de la propiedad “content”. Esto dará motivos a ciertas incompatibilidades en navegadores más antiguos, no obstante en IE7 podemos solucionar estos detalles utilizando ie7.js, logrando un mejor nivel de compatibilidad.
Ejemplo de uso:
JavaScript:
$(function() { $.filtrify("container", "placeHolder"); });
HTML:
<div id="placeHolder"></div> <ul id="container"> <li data-genre="pop, rock, british, classic rock"> The Beatles </li> <li data-genre="rock, british, blues, classic rock"> The Rolling Stones </li> <li data-genre="alternative, electronic, female vocalists"> Björk </li> <li data-genre="rock, alternative, grunge"> Foo Fighters </li> <li data-genre="rock, classic rock"> Bruce Springsteen </li> ... </ul>
En el sitio oficial del proyecto pueden encontrar varios ejemplos, y distintas implementaciones de este plugin.
Web: Filtrify
