可篩選元素
有一個以上的子元素的所有元素,可以過濾。
如何創建一個搜索欄:
- 你想過濾的元素,必須包括data-filter="true"屬性。
- 創建一個<input>具有指定ID元素,並添加data-type="search"的屬性。 這將創建一個基本的搜索字段。 包裹<input>的形式,並添加"ui-filterable"級到<form>元素-這將調整搜索字段和過濾元件之間的空白。
- 接著,添加data-input屬性的過濾元素。 它的值必須在的ID匹配<input>元素。
下面,我們創建了一個過濾列表視圖:
搜索列表中的元素
<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>
試一試» 提示:使用佔位符來指定描述搜索領域的預期值短的提示:
自定義過濾器
每個子元素中的文本是用於過濾(如實際文本"Adele"或"B"為"Billy" )。 但是,如果你要來過濾搜索到自定義過濾文本,而不是,您可以添加數據filtertext屬性的子元素:
如果您使用data-filtertext屬性的元素,特定元素的原始文本/內容過濾忽略(在上面的例子中,你不再能夠搜索列表項"Adele" ,你只能找到阿黛爾通過鍵入關鍵字"f, a, v或fav ”)。
更多示例
過濾可折疊列表
如何篩選可折疊組列表。
過濾表
如何篩選表。
過濾器<div>元素
如何篩選<div>包含的子元素<p>元素。