La ultima versión de Spry (1.1) tiene entre sus novedades la posibilidad de utilizar un filtrado no destructivo, lo que permite permite filtrar datos de forma no permanente, evitando con ello la necesidad de volver a cagar los datos de la fuente xml, tal y como sucedía hasta ahora.

Spry ofrece ahora ambas posibilidades: Utilizar un filtro destructivo (de manera que los datos no seleccionados dejarán estar disponibles hasta que se vuelvan a solicitar al fichero xml) y otro no destructivo, en el que los datos persisten sin ecesidad de recargar.

Para el primero de los casos se mantiene la función filterData(), que ya existía en las versiones anteriores de Spry. Ahora, se añade la función filter(), que permite realizar filtrados en los que los datos no utilizados no desaparecen, sino que se mantienen (de ahí su definición de filtrado no destructivo).

Este tutorial es un ejemplo del uso de esta función: Se trata de crear un campo de texto en el queiremos escribiendo texto y que de forma dinámica, irá realizando un filtrado de los datos, los cuales se actualizarán en el documento sin necesidad de recargar. Un ejemplo en la vida real puede ser el quehace Google para ir mostrando posibilidades de búsqueda que coincidan con el texto escrito. Nuestr caso práctico mostrará un listado de productos de Adobe. A medida que escribamos en el campo de texto, se irán eliminando aquellos cuyo nombre no coincida con lo escrito.

El ejemplo en funcionamiento está disponible haciendo click aquí.
Pusa aquí para ver el archivo products.xml.
Puedes descargarte el ejemplo completo y listo para funcionar desde aquí.

Nuestro primer caso, como en toda aplicación que use Spry, es definir el namespace y llamar a los 2 archivos js (xpath.js y SpryData.js) necesarios. Debemos recordar que a partir de esta versión 1.1, la sintaxis difiere de la utilizada en versiones anterios (para conseguir la validación como xhtml):





filtrado no destructivo





Buscar Producto :
  • {name}

Hasta ahora, simplemente hemos creado una región repetida (con la etiqueta li) que nos mostrará todos los productos obtenidos del fichero xml. Nuestro siguiente paso será añadir una función que realice el filtrado.

Paginas: 1 2 3