Elementi filtrabili
Tutti gli elementi che hanno più di un elemento secondario, possono essere filtrati.
Come creare un campo di ricerca:
- L'elemento che si desidera essere filtrabile, deve includere il data-filter="true" attributo.
- Crea un <input> elemento con un specificato id e aggiungere il data-type="search" attributo. Questo creerà un campo di ricerca di base. Avvolgere il <input> in un modulo, e aggiungere il "ui-filterable" classe al <form> elemento - questo sarà regolare il margine tra il campo di ricerca e l'elemento filtrabile.
- Quindi, aggiungere l' data-input attributo per l'elemento filtrabile. Il suo valore deve corrispondere l'id del <input> elemento.
Qui di seguito, abbiamo creato una visualizzazione elenco filtrabile:
Ricerca di elementi in 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> Prova tu stesso " Suggerimento: utilizzare un segnaposto per specificare un breve accenno al fatto che descrive il valore atteso del campo di ricerca:
Esempio
<input
id="myFilter" data-type="search" placeholder="Search
for names.." >
Prova tu stesso " Filtro personalizzato
Il testo all'interno di ogni elemento figlio è il testo effettivo che viene utilizzato per il filtraggio (come "Adele" o "B" per "Billy" ). Tuttavia, se si desidera filtrare la ricerca di un testo filtro personalizzato, invece, è possibile aggiungere l'attributo data-filtertext a qualsiasi elemento secondario:
Se si utilizza il data-filtertext attributo di un elemento, il testo / contenuto originale di quel particolare elemento viene ignorato per il filtraggio (Nell'esempio di cui sopra, non si è più in grado di cercare la voce di elenco "Adele" . Si possono trovare solo Adele digitando le parole chiave "f, a, v o fav ".)
Altri esempi
Elenchi di filtri pieghevoli
Come filtrare una serie di liste pieghevole.
Filtro tabelle
Come filtrare una tabella.
Filtro <div> elementi
Come filtrare un <div> elemento contenente bambino <p> elementi.