Filtrar elementos con jQuery Mobile

26/May/2012 Desarrollo Móvil , , , , , , , 2 Comentarios

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:

  1. <ul data-role="listview" data-inset="true">
  2. <li>Avila</li>
  3. <li>Burgos</li>
  4. <li>León</li>
  5. <li>Palencia</li>
  6. <li>Salamanca</li>
  7. <li>Segovia</li>
  8. <li>Soria</li>
  9. <li>Valladolid</li>
  10. <li>Zamora</li>
  11. </ul>

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.

  1. <ul data-role="listview" data-inset="true" data-filter="true">
  2. <li>Avila</li>
  3. <li>Burgos</li>
  4. <li>León</li>
  5. <li>Palencia</li>
  6. <li>Salamanca</li>
  7. <li>Segovia</li>
  8. <li>Soria</li>
  9. <li>Valladolid</li>
  10. <li>Zamora</li>
  11. </ul>

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.

  1. <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="¿Qué ciudad buscas?">
  2. ...
  3. </ul>

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.

  1. $(document).bind("mobileinit", function(){
  2. $.mobile.listview.prototype.options.filterPlaceholder = "Texto del PlaceHolder Cambiado Por Código";
  3. });

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.

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

2 comentarios en “Filtrar elementos con jQuery Mobile”

Víctor Cuervo

Andres

Amigo te quería consultar una cosa. Luego que yo elijo en las “sugerencias” la que deseo como levanto ese valor desde jquery. Yo creí que con $(#id).text(); pero eso me trae todos los elementos de la lista. Gracias.

Los comentarios están cerrados.