博客

jQuery Mobile filterable事件

  • Post category:jquery

jQuery Mobile 是一款针对移动设备开发的轻量级JavaScript库，提供了许多方便的组件和事件来简化移动开发。其中包括 filterable 事件，可以轻松实现基于关键字搜索的过滤器功能。

什么是 filterable 事件

filterable 事件是 jQuery Mobile 提供的一种过滤器组件，可以让用户通过输入关键字来快速筛选数据。它通常应用于列表、表格和下拉菜单等需要搜索的元素上，可以更便捷地帮助用户快速找到需要的内容。

如何使用 filterable 事件

使用 filterable 事件很简单，只需添加 data-filter=”true” 属性即可。这里以一个简单的列表为例：

<ul data-role="listview" data-filter="true">
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li><a href="#">Cherry</a></li>
</ul>

以上代码定义了一个包含三个列表项的列表，同时添加了 data-filter=”true” 属性，表示开启过滤器功能。用户可以通过在页面顶部输入框中输入相关关键字，列表会自动更新显示匹配的项。

filterable 事件的高级选项

除了基础用法之外，filterable 事件还提供了一些高级选项，可以进一步定制搜索功能。

使用 data-filter-placeholder 属性

data-filter-placeholder 属性可以定义输入框的占位符文本，用于提示用户需要输入何种关键字。例如：

<ul data-role="listview" data-filter="true" data-filter-placeholder="请输入关键字">
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li><a href="#">Cherry</a></li>
</ul>

使用 data-filter-theme 属性

data-filter-theme 属性可以定义搜索框的主题，让它和页面其它元素保持一致或者突出不同。例如：

<ul data-role="listview" data-filter="true" data-filter-theme="b">
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li><a href="#">Cherry</a></li>
</ul>

使用 filterablebeforefilter 和 filterableafterfilter 事件

filterablebeforefilter 和 filterableafterfilter 事件分别表示在过滤器开始过滤和过滤器结束过滤时发生的事件。通过它们可以进行更多自定义操作，例如：

$(document).on("filterablebeforefilter", "#mylist", function(event, data) {
  console.log(data.input.val());
});

$(document).on("filterableafterfilter", "#mylist", function(event, data) {
  console.log($("#mylist li:visible").length);
});

以上代码定义了 filterablebeforefilter 和 filterableafterfilter 事件的处理函数，在过滤前和过滤后分别打印输入框中的关键字和可见列表项的数量。

示例说明

示例1：基础用法

<!DOCTYPE html>
<html>
  <head>
    <title>示例1：基础用法</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>示例1：基础用法</h1>
      </div>
      <div data-role="content">
        <ul data-role="listview" data-filter="true">
          <li><a href="#">Apple</a></li>
          <li><a href="#">Banana</a></li>
          <li><a href="#">Cherry</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

以上代码定义了一个包含三个列表项的列表，同时添加了 data-filter=”true” 属性，表示开启过滤器功能。用户可以通过在页面顶部输入框中输入相关关键字，列表会自动更新显示匹配的项。

示例2：高级用法

<!DOCTYPE html>
<html>
  <head>
    <title>示例2：高级用法</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>示例2：高级用法</h1>
      </div>
      <div data-role="content">
        <ul data-role="listview" data-filter="true" data-filter-placeholder="请输入关键字" data-filter-theme="b">
          <li><a href="#">Apple</a></li>
          <li><a href="#">Banana</a></li>
          <li><a href="#">Cherry</a></li>
        </ul>
      </div>
    </div>
    <script>
      $(document).on("filterablebeforefilter", "ul[data-filter='true']", function(event, data) {
        console.log("开始过滤：" + data.input.val());
      });
      $(document).on("filterableafterfilter", "ul[data-filter='true']", function(event, data) {
        console.log("过滤后数量：" + $(this).find("li:visible").length);
      });
    </script>
  </body>
</html>

以上代码定义了一个类似于示例1的列表，但是添加了 data-filter-placeholder=”请输入关键字” 和 data-filter-theme=”b” 两个属性，分别表示占位符文本和输入框主题。另外还定义了 filterablebeforefilter 和 filterableafterfilter 两个事件的处理函数，分别在过滤前和过滤后打印输入框中的关键字和可见列表项的数量。

Tags: