jQuery Mobile Listview filterReveal选项

jQuery Mobile提供了一种方便快捷的方式对列表进行筛选，这就是filterReveal选项。本文将详细介绍如何使用filterReveal选项，包括如何在列表上添加搜索框，以及如何自定义筛选器。

一、filterReveal选项是什么？

filterReveal选项是jQuery Mobile提供的一个列表筛选功能，它允许用户搜索列表项目并动态地显示筛选结果。选项有两种类型：过滤筛选和搜索筛选。当用户在筛选框中输入一个或多个字符时，filterReveal会自动开启筛选模式并对应更新列表。除此之外，我们还可以设置前端、后端、无序列表等等的搜索和筛选模式。

二、filterReveal选项的使用方法

2.1 简单的filterReveal示例

我们首先来看一个简单的filterReveal列表示例。使用filterReveal列表非常简单，我们只需要在列表元素上添加 data-filter="true" 属性即可：

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-inset="true">
  <li><a href="#">第一项</a></li>
  <li><a href="#">第二项</a></li>
  <li><a href="#">第三项</a></li>
  <li><a href="#">第四项</a></li>
  <li><a href="#">第五项</a></li>
  <li><a href="#">第六项</a></li>
</ul>

其中，data-role="listview"用于显示列表，data-filter="true"用于开启筛选功能，data-filter-reveal="true"用于开启animation效果，data-inset="true"用于添加圆角效果。

2.2 自定义filterReveal筛选器

除了以上示例，我们还可以自定义filterReveal筛选器。在自定义筛选器时我们需要设置筛选器的回调函数，函数接收两个参数：第一个参数为用户输入的搜索关键字，第二个参数为需要被筛选的列表元素。

<ul data-role="listview" data-filter="true" data-inset="true">
  <li><a href="#">苹果</a></li>
  <li><a href="#">香蕉</a></li>
  <li><a href="#">橘子</a></li>
  <li><a href="#">西瓜</a></li>
  <li><a href="#">葡萄</a></li>
</ul>

<script>
  $(function(){
    $("ul").filterable({
      filterReveal: function( index, searchValue ) {
        if($(this).text().search(new RegExp(searchValue, "i")) < 0) {
          $(this).addClass("ui-screen-hidden");
        }
        else {
          $(this).removeClass("ui-screen-hidden");
        }
      }
    });
  });
</script>

在上述示例中，我们按照自己的需要设计了一个筛选器，这个过程非常简单，我们只需要在JavaScript代码中添加一个自定义的filterReveal筛选器即可。具体的实现过程是：定义一个回调函数，这个函数有两个参数，第一个为筛选关键字，第二个为需要被筛选的列表元素，然后我们使用CSS ui-screen-hidden 类将不需要显示的列表元素隐藏即可。

总结：filterReveal是jQuery Mobile提供的一个方便、快捷的列表筛选功能选项，可以帮助我们快速实现搜索功能。同时，还可以进行自定义filterReveal筛选器的设计，但是需要注意正则表达式的使用。