Filterelemente
Alle Elemente, die mehr als ein Kind-Element haben, können gefiltert werden.
Wie man ein Suchfeld zu erstellen:
- Das Element , das Sie wollen filterbar zu sein, müssen die umfassen data-filter="true" Attribut.
- Erstellen Sie ein <input> Element mit einer bestimmten ID und fügen Sie die data-type="search" Attribut. Dies wird eine grundlegende Suchfeld erstellen. Wickeln Sie das <input> in einem Formular, und fügen Sie den "ui-filterable" Klasse in die <form> Element - dies wird die Spanne zwischen dem Suchfeld und dem filterbar Element anpassen.
- Dann fügen Sie die data-input - Attribut in das filterbar Element. Der Wert muss die ID des übereinstimmen <input> Element.
Im Folgenden haben wir eine filterbar Listenansicht erstellt:
Suchen Sie nach Elementen in einer Liste
<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> Versuch es selber " Tipp: Verwenden Sie einen Platzhalter mit einem kurzen Hinweis zu spezifizieren , die den erwarteten Wert des Suchfeldes beschreibt:
Beispiel
<input
id="myFilter" data-type="search" placeholder="Search
for names.." >
Versuch es selber " Benutzerdefinierte Filter
Der Text innerhalb jedes Kind - Element ist der eigentliche Text, der für die Filterung (wie verwendet wird , "Adele" oder "B" für "Billy" ). Allerdings, wenn Sie die Suche auf einen benutzerdefinierten Filtertext statt filtern möchten, können Sie die Daten-filtertext Attribut zu jedem Kind-Element hinzu:
Wenn Sie die Verwendung data-filtertext Attribut auf ein Element, das ursprüngliche Text / Inhalt dieses spezielle Element zum Filtern ignoriert (In dem obigen Beispiel, Sie sind nicht mehr in der Lage für das Listenelement zu suchen "Adele" . Sie können nur finden Adele durch die Schlüsselwörter eingeben "f, a, v oder fav ".)
Mehr Beispiele
Filter Klapp - Listen
Wie eine zusammenklappbare Menge von Listen zu filtern.
Filtertabellen
Wie eine Tabelle zu filtern.
Filter <div> Elemente
Wie ein zu filtern <div> Element enthält Kind <p> Elemente.