最新的Web开发教程
 

jQuery Mobile过滤器



可筛选元素

有一个以上的子元素的所有元素,可以过滤。

如何创建一个搜索栏:

  • 你想过滤的元素,必须包括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>
试一试»

提示:使用占位符来指定描述搜索领域的预期值短的提示:

<input id="myFilter" data-type="search" placeholder="Search for names.." >
试一试»

自定义过滤器

每个子元素中的文本是用于过滤(如实际文本"Adele""B""Billy" )。 但是,如果你要来过滤搜索到自定义过滤文本,而不是,您可以添加数据filtertext属性的子元素:

<li data-filtertext="fav" ><a href="#">Adele</a></li>
试一试»

如果您使用data-filtertext属性的元素,特定元素的原始文本/内容过滤忽略(在上面的例子中,你不再能够搜索列表项"Adele" ,你只能找到阿黛尔通过键入关键字"f, a, vfav ”)。


更多示例

过滤可折叠列表
如何筛选可折叠组列表。

过滤表
如何筛选表。

过滤器<div>元素
如何筛选<div>包含的子元素<p>元素。