可筛选元素
有一个以上的子元素的所有元素,可以过滤。
如何创建一个搜索栏:
- 你想过滤的元素,必须包括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>元素。