jQuery Mobile 过滤学习笔记

介绍

jQuery Mobile 提供了一种方便的方法来过滤列表视图。使用 data-filter 属性可以将一个文本输入框添加到列表头，然后每次键入时会自动过滤列表中不匹配的项。可以结合多个数据筛选器（data-type="search"、data-type="filter"）来进行更为灵活的筛选。

使用示例：

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Mobile 过滤学习笔记</title>
    <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.1.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>My Filterable List</h1>
        <form class="ui-filterable">
          <input id="myFilter" data-type="search" placeholder="Search...">
        </form>
      </div>
      <div data-role="main" class="ui-content">
        <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#myFilter">
          <li data-icon="false"><a href="#">Apple</a></li>
          <li data-icon="false"><a href="#">Banana</a></li>
          <li data-icon="false"><a href="#">Cherry</a></li>
          <li data-icon="false"><a href="#">Date</a></li>
          <li data-icon="false"><a href="#">Fig</a></li>
        </ul>
      </div>
      <div data-role="footer">
        <h1>Footer Text</h1>
      </div>
    </div> 
  </body>
</html>

上述示例代码中，我们使用了一个文本输入框和一个具有 data-role="listview" 属性的无序列表。文本输入框包含 data-type="search" 属性、列表包含 data-filter="true" 和 data-input="#myFilter" 属性。可以看到，我们已经将这个文本输入框连接至列表，用来实现过滤效果。

细节

支持通过 data-filter-placeholder 属性定制提示符。
通过设置 data-filter-reveal="true" 可以确保过滤结果全部展示，并且在输入框下方显示过滤结果数量。
可通过设置 data-inset="true" 使列表呈现为圆角矩形，这样更有美感。

总结

这就是如何使用 jQuery Mobile 的数据筛选器来快速构建可搜索和可过滤的列表视图。使用 jQuery Mobile 提供的丰富的配置选项可以轻松地应用到自己的应用程序之中。

希望这篇学习笔记对你有所帮助！