jQuery Mobile filterable事件

jQuery Mobile是一个非常流行的移动端开发框架，提供了丰富的组件和事件来快速搭建响应式、可触摸的移动应用。其中之一就是filterable事件，本文将详细讲解filterable事件的完整攻略。

概述

filterable事件是jQuery Mobile中用于实现自动搜索和筛选的事件。该事件通常应用于包含大量数据的列表、表格、滚动视图等组件中。当用户输入搜索关键字时，关键字会自动匹配显示在组件中的数据，并过滤掉不匹配的数据，从而实现数据的搜索和筛选。

filterable事件包含以下几种类型：

• filterablecreate：对应于组件创建时的初始化过程，通常在页面初始化或刷新时触发。
• filterablebeforefilter：对应于搜索关键字输入前的准备过程，通常在搜索框获取焦点之前触发。
• filterablefilter：对应于搜索关键字匹配和过滤数据的过程，通常在搜索框输入关键字后触发。

filterablecreate事件

filterablecreate事件通常用来对搜索组件进行初始化设置，比如设定是否自动隐藏搜索框、设置匹配规则、绑定过滤事件等。下面是一个示例代码：

$(document).on("pagecreate","#page",function(){
  $("#listview").filterable({
    filterReveal: true,
    filterPlaceholder: "搜索...",
    filterCallback: function(index, searchValue, item){
      return item.text().toLowerCase().indexOf(searchValue.toLowerCase()) === -1 ? false : true;
    }
  });
});

上述代码中，我们在页面创建完成后对id为listview的组件进行了初始化设置。其中filterReveal为true表示自动展示搜索框，filterPlaceholder表示搜索框的提示语，filterCallback为匹配规则回调函数，即只显示包含搜索关键字的数据项。

filterablebeforefilter事件

filterablebeforefilter事件通常用于对搜索关键字进行预处理，比如将关键字统一转为小写或大写、转义特殊字符等。下面是一个示例代码：

$(document).on("pagecreate","#page",function(){
  $("#listview").on("filterablebeforefilter", function(e, data){
    var $ul = $(this),
        value = data.input.value.toLowerCase();
    $ul.find("li").show();
    if (value && value.length > 2) {
      $ul.find("li:not(:contains(" + value + "))").hide();
    }
  });
});

上述代码中，我们在对id为listview的组件绑定了filterablebeforefilter事件。该事件会对输入框的值进行处理，将其值转为小写，取出组件的li子元素，并将li元素中不符合搜索条件的元素隐藏起来。

filterablefilter事件

filterablefilter事件通常用于对搜索完成后的结果进行处理，比如更新界面显示、操作搜索结果、统计数据等。下面是一个示例代码：

$(document).on("pagecreate","#page",function(){
  $("#listview").on("filterablefilter", function(e, ui){
    var $list = $(this),
        $items = $(ui.items);
    if ($items.length === 0) {
      $list.append("<li><p>无结果!</p></li>");
    } else {
      $items.each(function(index, element){
        $(element).find("p").before("<h5>" + $(element).find("p").text().charAt(0) + "</h5>");
      });
      $list.removeClass("ui-listview-hidden");
    }
  });
});

上述代码中，我们通过对id为listview的组件绑定filterablefilter事件，实现了搜索结果的处理。该事件会对搜索后的结果进行处理，如果结果为空，则在列表中添加一个“无结果”的提示项；如果结果不为空，则在每个搜索结果前添加一个首字母标识。

总结

filterable事件是jQuery Mobile中用于实现搜索和筛选功能的重要事件之一。本文详细讲解了filterablecreate、filterablebeforefilter和filterablefilter三种事件的应用场景、回调函数的设置以及示例代码。通过学习本文，相信读者已经掌握了filterable事件的基本用法和实现方法。