可过滤

任何元素的子级元素可以被过滤通过设置元素上的 data-filter="true"属性。默认的，每个子级的文本用来过滤,但是，你也可选设置data-filtertext为字符串类型的值在任意子级上，并且将版视为相关自定义检索文本。

基本过滤器

filter部件是基于和替换了listview filter 扩展。因此，你可以设置data-filter="true"在一个listview来生成一个列表项的过滤器。

然而,可过滤器不同于listview 扩展的构造方式在一个重要方面上:不提供键入搜索字符串的文本域。相反，你可以提供文本域用你的标记，并用它来筛选通过提供一个选择器用于获取筛选的值，选择器作为可过滤器的data-input 属性。添加 class ui-filterable 到包裹搜索表单的 form或者到listview来实现框架级调整主题文本域和listview的margin。

filterable 在过滤元素前添加文本域的弃用行为保留在1.4.0里来帮助listview的过渡，但是在1.5.0会被删除。

表格过滤器

你不被限定只使用过滤器在listview上。要创建一个表格部件的过滤器，在表格元素上设置 data-filter="true" 来生成一个表格行过滤器。

控制组过滤器

过滤器部件也可以被用于其他部件。 要过滤一个控制组列表，在创建控制组的元素上声明 data-filter="true" (注意下，你也可以使用data-filtertext 属性来重声明相关元素过滤用的文本字符串。

多选过滤器

部件在 select 部件上也生效通过隐藏不匹配的选项。要使用options过滤器声明 data-filter 属性到 select 元素上。

Collapsible(折叠集过滤器)

Filter Collapsible Set and collapsible children（折叠集通过子元素过滤）

过滤一切

该部件可以被用于过滤任意包含其他元素的元素像一个div 包含 p 元素。

过滤器样式

过滤器部件支持之前listview一样的属性。使用data-filter-theme 声明文本域的一个特定的主题（重写增强）。 data-filter-placeholder允许你定制输入框的placeholder文本。另外，可过滤组件将同步文本部件和过滤组件的属性来确保文本域部件选项的值和后面过滤部件的值一样。举个例子，如果你设置 data-inset="true" 在listview上,那么相对的文本域部件也将是inset。

注意:本行为是弃用的将在1.5.0中移除掉。正确的方式是提供文本域（或者任何发射“change”信号的部件）作为原生标签的一部分，传递一个选择器通过data-input 到可过滤器来取回变值。

过滤显示

过滤显示特性使得创建一个简单的本地数据自动完成很简单。当一个过滤器有data-filter-reveal="true" 属性, 它将会自动隐藏所有列表项当搜索域为空的时候。data-filter-placeholder 属性可以被添加来指定 过滤器的placeholder 文字。如果你需要在一个长列表值里搜索，我们提供一个方式来创建一个过滤器用到一个 远程数据源.

过滤器自定义回调

就像listview 扩展, 你可以提供一个自定义回调函数来过滤或者重写过滤配合 filterablebeforefilter 事件。请注意下过滤器在实际上触发之前有一个250ms的延迟 。这个组织运行过滤函数多次当用户一直在输入时。

要设置一个需要变成所有可过滤部件的默认自定义函数,可过滤部件原型的选项中覆写filterCallback 在一个 "mobileinit" 信号处理中:

$( document ).one( "mobileinit", function() {
	$.mobile.filterable.prototype.options.filterCallback = function( index, searchValue ) {
		// In this function the keyword "this" refers to the element for which the
		// code must decide whether it is to be filtered or not.
		// A return value of true indicates that the element referred to by the
		// keyword "this" is to be filtered.
		// Returning false indicates that the item is to be displayed.
		//
		// your custom filtering logic goes here
	});
});

要设置单个可过滤部件的自定义过滤函数设置 filterCallback 配置:

$.mobile.document.one( "filterablecreate", "#myFilterable", function() {
	$( "#myFilterable" ).filterable( "option", "filterCallback", function( index, searchValue ) {
		// The previous example explains the signature of the callback function.
		//
		// your custom filtering logic goes here.
	});
});

要同时复写多个过滤器过滤函数(比如当加载服务端数据或者从localStorage),绑定filterablebeforefilter 事件。

$( ".selector" ).on( "filterablebeforefilter", function( e, data ) {
		var value;

		e.preventDefault();
		value = data.input.value;
		// trigger own request to database
	});
});

预渲染

可过滤部件在启动时只运行一次来确保子级列表响应输入框输入的值。你可以避免这步通过指定data-enhanced="true" 属性.当设置为 true, 过滤器将假设你正确应用类名ui-screen-hidden到那些初始化应该被隐藏的子级上。

可过滤部件将可以使用搜索输入框不论输入框自身有没有被预渲染。在下面的例子里，搜索框和过滤器同时被预渲染了。