jQuery Mobile 过滤（建议收藏）

什么是 jQuery Mobile 过滤？

在移动 Web 开发中，用户常常需要从大量数据中快速找到目标内容。比如在一个联系人列表中搜索“张三”，或在商品列表中筛选“价格低于 200 元”的商品。这时，jQuery Mobile 过滤 就派上用场了。

简单来说，jQuery Mobile 过滤是一种在移动端页面中，通过输入关键词实时筛选列表项的功能。它能让你的页面“聪明”起来——用户输入一个字母，页面立刻响应，只显示匹配的内容。

想象一下，你有一本厚厚的电话簿，里面全是名字。如果没有过滤功能，你得一页页翻找；但有了过滤，你只要在搜索框里输入“李”，所有姓“李”的人就自动浮现。这正是 jQuery Mobile 过滤的核心思想：让数据“动起来”，让用户“少动”。

这个功能特别适合在手机端使用，因为小屏幕下用户操作不便，效率尤为重要。而 jQuery Mobile 作为专为移动设备优化的框架，内置了强大的过滤机制，让你无需从零写逻辑，几行代码就能实现。

实现基础过滤：HTML 结构与数据准备

在开始过滤之前，我们先搭建一个最基础的 HTML 列表结构。这是所有功能的起点，就像盖房子前要打地基。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Mobile 过滤示例</title>
  <!-- 引入 jQuery Mobile 的 CSS 和 JS -->
  <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" id="mainPage">
    <div data-role="header">
      <h1>联系人列表</h1>
    </div>

    <!-- 搜索框：过滤的起点 -->
    <div data-role="content">
      <input type="search" id="contactFilter" placeholder="输入姓名搜索..." />

      <!-- 列表容器 -->
      <ul id="contactList" data-role="listview" data-filter="true" data-filter-placeholder="搜索联系人...">
        <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>
        <li><a href="#">刘洋</a></li>
      </ul>
    </div>
  </div>

</body>
</html>

这段代码中，关键点有三：

data-filter="true"：这是 jQuery Mobile 内置过滤功能的开关。只要加上这个属性，列表就会自动响应搜索框的输入。
data-filter-placeholder="搜索联系人..."：这是搜索框的提示文字，帮助用户理解功能。
<input type="search">：使用 search 类型的输入框，浏览器会自动优化移动端键盘，提升输入体验。

💡 提示：data-role="listview" 是 jQuery Mobile 的列表组件，它支持多种交互，如点击跳转、分组、图标等。配合 data-filter，它就变成了一个“会思考”的列表。

深入理解 jQuery Mobile 过滤机制

很多人以为过滤只是“查一下文字”，但背后其实有完整的匹配逻辑。jQuery Mobile 的过滤机制并不是简单地比对字符串，而是通过“模糊匹配”和“忽略大小写”来提升用户体验。

例如，当你在搜索框输入“张”，它会匹配所有包含“张”的名字，无论“张”在名字的开头、中间还是结尾。

更关键的是，它会自动忽略大小写。无论你输入“zhang”还是“ZHANG”，结果都一样。

这个能力是通过 jQuery Mobile 框架内部的 $.mobile.listview.prototype.filter 方法实现的。我们可以通过自定义事件来扩展它的行为。

// 监听列表过滤事件，实现自定义逻辑
$(document).on("listviewbeforefilter", "#contactList", function (event, ui) {
  console.log("开始过滤，关键词为：", ui.input.val());
  // 这里可以加入自定义过滤逻辑，比如排除某些项目
});

// 过滤完成后触发
$(document).on("listviewafterfilter", "#contactList", function (event, ui) {
  console.log("过滤完成，共显示", ui.filteredItems.length, "项");
});

⚠️ 注意：listviewbeforefilter 和 listviewafterfilter 是 jQuery Mobile 提供的事件，可以让你在过滤前/后执行额外操作。比如统计匹配数量、记录搜索日志等。

这种机制让你不仅能“过滤”，还能“掌控”过滤过程。比如你可能想让“张伟”优先显示，哪怕“李娜”也匹配了，但“张伟”必须排在前面。

实战案例：动态数据的过滤处理

上面的例子是静态数据。但真实项目中，数据往往来自服务器。这时我们得用 JavaScript 动态生成列表。

下面是一个动态加载数据并实现过滤的完整例子：

// 模拟从服务器获取的数据
const contacts = [
  { name: "张伟", phone: "13800138001" },
  { name: "李娜", phone: "13800138002" },
  { name: "王强", phone: "13800138003" },
  { name: "张敏", phone: "13800138004" },
  { name: "赵丽", phone: "13800138005" },
  { name: "张浩", phone: "13800138006" },
  { name: "刘洋", phone: "13800138007" }
];

// 初始化列表
function renderContactList() {
  const list = $("#contactList");
  list.empty(); // 清空原有内容

  // 遍历数据，动态生成列表项
  contacts.forEach(item => {
    const li = $("<li></li>");
    const a = $("<a></a>").text(item.name);
    a.attr("href", "#contact-detail");
    a.data("phone", item.phone); // 保存电话号码，用于详情页
    li.append(a);
    list.append(li);
  });

  // 重新初始化 listview，确保过滤功能生效
  list.listview("refresh");
}

// 监听搜索框输入，触发过滤
$("#contactFilter").on("input", function () {
  const keyword = $(this).val().toLowerCase();
  const list = $("#contactList");

  // 手动过滤（可选，用于复杂逻辑）
  list.find("li").each(function () {
    const text = $(this).text().toLowerCase();
    if (text.includes(keyword)) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });

  // 刷新 listview，更新 UI
  list.listview("refresh");
});

// 页面加载完成后渲染数据
$(document).on("pageinit", "#mainPage", function () {
  renderContactList();
});

这个例子中，我们做了三件事：

用 JavaScript 模拟从服务器拉取联系人数据。
动态生成 <li> 元素，避免写死 HTML。
通过 input 事件监听用户输入，实时控制列表项的显示/隐藏。

✅ 优势：这种方式可以处理任意数量的数据，且支持自定义逻辑，比如按电话号码过滤、排除某些用户等。

高级技巧：自定义过滤规则与性能优化

在实际项目中，你可能需要更复杂的过滤规则。比如：

只匹配名字开头为“张”的人
忽略空格或特殊字符
过滤时高亮关键词

jQuery Mobile 支持通过自定义函数实现这些需求。

// 自定义过滤函数
function customFilter(item, keyword) {
  const text = item.text().toLowerCase();
  const cleanKeyword = keyword.replace(/\s+/g, ""); // 去除空格
  const cleanText = text.replace(/\s+/g, ""); // 去除空格

  // 只匹配名字以“张”开头的
  return cleanText.startsWith(cleanKeyword);
}

// 绑定自定义过滤逻辑
$(document).on("listviewbeforefilter", "#contactList", function (event, ui) {
  const keyword = ui.input.val();
  const list = ui.list;

  // 手动处理过滤
  list.find("li").each(function () {
    const $this = $(this);
    const match = customFilter($this, keyword);
    $this.toggle(match);
  });

  // 阻止默认过滤，使用自定义逻辑
  event.preventDefault();
});

🚀 性能提示：如果列表有上千条数据，频繁操作 DOM 会卡顿。建议使用“防抖”（debounce）技术，延迟执行过滤，避免频繁重绘。

// 防抖函数：输入后 300ms 再执行过滤
function debounce(func, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

$("#contactFilter").on("input", debounce(function () {
  // 执行过滤逻辑
  renderContactList(); // 或调用过滤函数
}, 300));

这个小技巧能极大提升用户体验，尤其在低性能设备上。

总结：让页面更智能，让用户更轻松

jQuery Mobile 过滤功能虽然看似简单，却是提升移动端用户体验的核心工具。它不仅让你的列表“会思考”，还能通过事件、自定义逻辑和性能优化，让功能更加灵活。

从静态数据到动态加载，从默认行为到自定义规则，每一步都在为“用户友好”加分。

记住：

使用 data-filter="true" 是开启过滤的捷径；
通过 listviewbeforefilter 事件掌控过滤过程；
动态数据需配合 listview("refresh") 刷新；
复杂需求可用自定义函数 + 防抖优化。

当你在项目中加入这个功能，用户输入一次，结果就跳出来——这种“即刻反馈”的体验，正是优秀移动应用的标志。

让数据动起来，让页面更聪明，这就是 jQuery Mobile 过滤的魅力所在。