jQuery Mobile nos ofrece un mecanimo de filtrado de datos en cliente muy potente. Y es que podemos configurar las listas para que permitan filtrar los elementos.
Si partimos de una lista sencilla con jQuery Mobile:
- Avila
- Burgos
- León
- Palencia
- Salamanca
- Segovia
- Soria
- Valladolid
- Zamora
Lo único que tenemos que hacer es insertar un atributo data-filter=»true». Este atributo de jQuery Mobile hará que aparezca un elemento de filtrado en nuestras listas.
- Avila
- Burgos
- León
- Palencia
- Salamanca
- Segovia
- Soria
- Valladolid
- Zamora
Generando el siguiente resultado:
El siguiente paso será configurar el texto que aparece en la caja de filtrado. Para que aparezca algo representativo. Por ejemplo, si estamos buscando ciudades podríamos poner algo como «¿Qué ciudad estás buscando?». Lo que tenemos que hacer es modificar el placeholder del campo de búsqueda.
Para modificar el placeholder de la lista en jQuery Mobile tenemos dos opciones. La primera es mediante un atributo. Este es el attributo data-filter-placeholder. Lo que tendremos que hacer es darle como valor el texto que queremos que aparezca en el filtro.
-
...
La segunda forma que tenemos de modificar el texto de la caja de filtrado en jQuery Mobile es vía código. Y es que el texto del placeholder se puede modificar en la variable $.mobile.listview.prototype.options.filterPlaceholder. Por lo tanto, en el evento «mobileinit», es decir, cuando se está inicializando el framework podems modificar su valor.
$(document).bind("mobileinit", function(){
$.mobile.listview.prototype.options.filterPlaceholder = "Texto del PlaceHolder Cambiado Por Código";
});
Recuerda que para escuchar eventos en jQuery utilizamos el método .bind()
Esta segunda opción es más para una configuración general de los placeholder de todos los filtros de la aplicación. Es por ello que se suele sacar a un fichero de configuración custom-scripting.js en el cual podamos modificar sus valores de forma sencilla.
Pues manos a la obra y haz que tu aplicación pueda filtrar elementos con jQuery Mobile.
