Los elementos que se pueden filtrar
Todos los elementos que tienen más de un elemento secundario, se pueden filtrar.
Cómo crear un campo de búsqueda:
- El elemento que desea ser filtrable, debe incluir la data-filter="true" atributo.
- Crear un <input> elemento con un id especificado y añadir el data-type="search" atributo. Esto creará un campo de búsqueda básica. Envolver el <input> en un formulario y agregue el "ui-filterable" clase a la <form> elemento - esto va a ajustar el margen entre el campo de búsqueda y el elemento filtrable.
- A continuación, añadir el data-input atributo al elemento filtrable. Su valor debe coincidir con el ID de la <input> elemento.
A continuación, hemos creado una vista de lista filtrable:
Búsqueda de elementos de una lista
<form class="ui-filterable">
<input id="myFilter"
data-type="search">
</form>
<ul data-role="listview"
data-filter="true" data-input="#myFilter" >
<li><a href="#">Adele</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
</ul> Inténtalo tú mismo " Consejo: Utilice un marcador de posición para especificar un breve atisbo que describe el valor esperado del campo de búsqueda:
Ejemplo
<input
id="myFilter" data-type="search" placeholder="Search
for names.." >
Inténtalo tú mismo " Filtro personalizado
El texto dentro de cada elemento secundario es el texto real que se utiliza para el filtrado (como "Adele" o "B" para "Billy" ). Sin embargo, si desea filtrar la búsqueda de un texto personalizado en lugar del filtro, puede agregar el atributo de filtertext datos a cualquier elemento hijo:
Si se utiliza el data-filtertext atributo en un elemento, el texto / contenido original de ese elemento en particular se tiene en cuenta para el filtrado (En el ejemplo anterior, usted ya no es capaz de buscar el elemento de lista "Adele" . Sólo se puede encontrar Adele escribiendo las palabras claves "f, a, v o fav ".)
Más ejemplos
Filtrar listas plegables
Cómo filtrar un conjunto de listas colapsable.
Tablas de filtro
Cómo filtrar una tabla.
Filtro <div> elementos
Cómo filtrar un <div> elemento que contiene niño <p> elementos.