Buscador con efecto de movimiento

Isotope es un plugin JQuery para manejar el layout de los elementos de tu sitio dependiendo del tamaño de la ventana del navegador. En Fuseala implementamos este buscador combinando Isotope con un poco de código para buscar 100% client-side (o sea que se resuelve todo en el navegador del cliente, sin consultar al servidor) y acá les mostramos como hacerlo.

Nuestro objetivo era hacer un buscador rápido, sencillo de utilizar y llamativo, para salir del ya obsoleto buscador con varios filtros, combos, checks, etc. Encontramos con Isotope una manera sencilla de resolver el layout de las salas a buscar, y con un poco de JQuery y expresiones regulares hicimos el resto. Vamos paso por paso.

Primero Isotopeamos

Supongamos que ya tenemos todas los elementos sobre los que queremos realizar la búsqueda, para  realizar la busqueda en el cliente. En principio parecería costoso tener todo el set de resultados cargado, pero según la cantidad de elementos que manejen, esto puede no serlo. Según nuestros calculos, con cientos o hasta un par de miles de resultados posibles y utilizando JSON para obtenerlos, esta solución es óptima. Para ya niveles de resultados mas grandes (por ejemplo, no parece ser una solución copada para Google y sus millones de resultados) necesitamos implementar otro tipo de búsqueda que involucre consultas al server.

Entonces, vamos a aplicarle el efecto Isotope a nuestro conjunto de resultados:


function inicializarIsotope() {

var $container = $("#salas-lista-container-div");
$container.isotope({
itemSelector : '.sala-div',
});
}

y a poner el siguiente CSS:


/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .sala-div {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}

.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}

.isotope .sala-div {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property:    -moz-transform, opacity;
-ms-transition-property:     -ms-transform, opacity;
-o-transition-property:         top, left, opacity;
transition-property:         transform, opacity;
}

Así de sencillo. Primero obtenemos el selector que contiene a todas los elementos (salas), y le aplicamos la función «isotope», indicandole la clase de cada item a renderizar. Con esto ya el plugin nos mueve de manera muy copada los items a medida que cambiamos de tamaño nuestra pantalla. Pruebenlo!

A buscar la sala

Tenemos el siguiente input para buscar:


<input id="filter" type="text" name="fname"  />

Y con este código le agregamos funcionalidad al mismo:


$("#filter").live("keyup", function(){
var items = $(".sala-div");
var text = this.value;
var expresionRegular = new RegExp( text, "i" );

items.removeClass("filtrada");

items.filter(function() {
return expresionRegular.test( $(this).text() );
}).addClass("filtrada");

$('#salas-lista-container-div').isotope({
filter: '.filtrada'
});
});

Explicamos el script: Primero le aplicamos un live al input para que en cada caracter que escriba el usuario, salte esta función. Obtenemos los items (salas), el texto ingresado (text) y creamos la expresión regular para machear el texto con las salas. Ese segundo parámetro «i» es el que hace que la expresión no sea case sensitive.

Para distinguir entre un item que machea y uno que no, vamos a usar la clase «filtrada». Entonces antes de filtrar, le quitamos la clase «filtrada» a todos los items. Luego los filtramos con la expresión regular que creamos, y a los que pasen este test, les agregamos la clase «filtrada». En este punto tenemos todas los items que en alguna parte de su contenido contienen la palabra que escribimos, con un class «filtrada» agregada .

Por último, usamos la funcionalidad que nos da isotope: Filtramos todos los items que tengan la class «filtrada». Con esto delegamos al plugin el filtrado, y van a poder observar el lindo efecto de movimiento de las salas que pasan el filtro, desplazandose por tu pantalla.

Como verán, es sencillo combinar un buscador con isotope. Quizás la parte que mas nos costó es la expresión regular, pero al final lo resolvimos de manera bastante sencilla.

Comentarios? Ideas? Son bienvenidas!

Saludos

Uva