Ya tenemos todos los elementos necesarios para filtrar los datos, sólo nos queda llamar al método filter() de Spry para que todo funcione.
filter() es un método vinculado a un dataset que necesita como parámetro el nombre de la función encargada de manejar el filtrado. En nuestro caso, ya tenemos ambos elementos: dsProductos y filtrarListado(). Por tanto, el código será:

dsProductos.filter(filtrarProductos);

La pregunta ahora es: ¿dónde colocamos el filtro? La respuesta es sencilla: Vamos a invocarlo cada vez que el usuario escriba algo en el campo de texto:

<input type="text" id="filterTF" onkeyup="dsProductos.filter(filtrarProductos);" />

y hemos terminado: Spry se encarga de todo lo demás: recorre el dataset, recupera los valores que coincidan y regenera el listado de elementos li con los valores que coincidad (ya que las regiones creadas por Spry (en nuestro caso, div id=”productsdiv” spry:region=”dsProductos”) ya incluyen un observer que comprueba las modificaciones y actúa en consecuencia.

Resumiendo los pasos:

1. Insertar el namespace y los vínculos a los archivos js
2. Crear la región y añadir el repeat necesario para mostrar todos los elementos.
3. Escribir una función que genere el filtrado
4. Invocar dicha función mediante el método filter() del dataset

Como podéis observar, generar filtrados dinámicos con Spry es una tarea sencilla y que apenas necesita 9 lineas de código extra para funcionar.

Descargar Ficheros de ejemplo.
Ver ejemplo 1 en funcionamiento
Ver ejemplo 2 en funcionamiento