菜鸟教程 – 学的不仅是技术，更是梦想！

技术网站，更是交流网站

jQuery Mobile 教程

jQuery Mobile 过滤

likuolei

jQuery Mobile 过滤（Filter）详解

过滤（Filter） 是 jQuery Mobile 的 实时搜索功能，主要用于 Listview 和 Table，用户输入时 自动筛选匹配项，无需刷新页面，触控友好。

常用于 联系人、商品、城市、设置项 等长列表。

1. 基本使用（Listview 过滤）

<ul data-role="listview" 
    data-filter="true" 
    data-filter-placeholder="搜索联系人...">
  <li><a href="#">张三</a></li>
  <li><a href="#">李四</a></li>
  <li><a href="#">王五</a></li>
</ul>

关键属性：

  • data-filter="true" → 开启过滤
  • data-filter-placeholder="提示文字" → 输入框提示

2. 过滤属性汇总

属性值说明
data-filter="true"true/false开启过滤
data-filter-placeholder文字输入框提示
data-filter-theme="a"a/b输入框主题
data-inset="true"true/false输入框圆角内嵌
data-input=".my-search"选择器自定义输入框

3. 完整示例（可直接运行）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQM 过滤功能</title>
  <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" data-position="fixed">
    <h1>过滤搜索</h1>
  </div>

  <div data-role="main" class="ui-content">

    <!-- 1. 基础过滤列表 -->
    <h3>联系人（内置搜索框）</h3>
    <ul data-role="listview" 
        data-inset="true" 
        data-filter="true" 
        data-filter-placeholder="输入姓名搜索...">
      <li><a href="#">Alice (比利时)</a></li>
      <li><a href="#">Bob</a></li>
      <li><a href="#">Charlie</a></li>
      <li><a href="#">David</a></li>
      <li><a href="#">Emma</a></li>
      <li><a href="#">Frank</a></li>
      <li><a href="#">Grace</a></li>
    </ul>

    <!-- 2. 带缩略图 + 过滤 -->
    <h3>应用市场</h3>
    <ul data-role="listview" 
        data-inset="true" 
        data-filter="true" 
        data-filter-placeholder="搜索应用...">
      <li>
        <a href="#">
          <img src="https://picsum.photos/80/80?random=1" class="ui-li-thumb">
          <h2>微信</h2>
          <p>社交聊天</p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="https://picsum.photos/80/80?random=2" class="ui-li-thumb">
          <h2>支付宝</h2>
          <p>移动支付</p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="https://picsum.photos/80/80?random=3" class="ui-li-thumb">
          <h2>淘宝</h2>
          <p>网上购物</p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="https://picsum.photos/80/80?random=4" class="ui-li-thumb">
          <h2>抖音</h2>
          <p>短视频</p>
        </a>
      </li>
    </ul>

    <!-- 3. 自定义输入框（外部搜索） -->
    <h3>城市列表（外部搜索框）</h3>
    <input type="search" name="citysearch" id="citysearch" 
           placeholder="输入城市名..." data-clear-btn="true">

    <ul data-role="listview" 
        data-inset="true" 
        data-filter="true" 
        data-input="#citysearch">
      <li><a href="#">Brussels</a></li>
      <li><a href="#">Antwerp</a></li>
      <li><a href="#">Ghent</a></li>
      <li><a href="#">Charleroi</a></li>
      <li><a href="#">Liège</a></li>
      <li><a href="#">Bruges</a></li>
    </ul>

    <!-- 4. 表格过滤（Table） -->
    <h3>用户表格（支持过滤）</h3>
    <table data-role="table" 
           class="ui-responsive" 
           data-mode="reflow" 
           data-filter="true" 
           data-input="#table-search">
      <thead>
        <tr>
          <th>姓名</th>
          <th>国家</th>
          <th>时间</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>比利时用户</td>
          <td>比利时</td>
          <td>03:07</td>
        </tr>
        <tr>
          <td>张伟</td>
          <td>中国</td>
          <td>03:06</td>
        </tr>
        <tr>
          <td>John</td>
          <td>美国</td>
          <td>03:05</td>
        </tr>
      </tbody>
    </table>
    <input type="search" id="table-search" placeholder="搜索表格...">

    <!-- 5. 当前信息 -->
    <h3>实时信息</h3>
    <ul data-role="listview" data-inset="true">
      <li>
        <h2>当前时间</h2>
        <p class="ui-li-aside">2025年11月17日 03:07（CET）</p>
      </li>
      <li>
        <h2>国家</h2>
        <p class="ui-li-aside">比利时 (BE)</p>
      </li>
    </ul>

  </div>

  <div data-role="footer" data-position="fixed">
    <h4>比利时 © 2025</h4>
  </div>
</div>

</body>
</html>

4. 过滤逻辑说明

  • 匹配规则：模糊匹配，不区分大小写
  • 匹配内容：
  • 所有 <a>、<h2>、<p> 内的文本
  • data-filtertext="自定义关键词" 可强制匹配
  • 无结果时：显示 “无匹配项”
<li data-filtertext="北京 中国 首都">
  <a href="#">北京市</a>
</li>

5. JavaScript 控制过滤

<script>
$(document).on("pagecreate", function() {
  // 手动触发过滤
  $("#myList").filterable("option", "filter", function(text) {
    return text.indexOf("比利时") !== -1;
  });

  // 清除过滤
  $("#myList").filterable("clear");

  // 监听过滤事件
  $("#myList").on("filterablefilter", function(e, data) {
    console.log("当前输入：" + data.input.val());
  });
});
</script>

6. 最佳实践

建议说明
始终加 data-inset="true"输入框美观
列表 > 10 项时开启过滤提升体验
用 data-filtertext 补充关键词提高匹配率
外部输入框用 data-input灵活布局
表格过滤用 data-mode="reflow"移动端友好

7. 常见问题

问题解决方案
搜索框不显示必须 data-filter="true"
搜索不到检查是否在 <a> 或 <h2> 内
动态数据不更新添加后调用 .listview("refresh")
过滤太慢避免超大列表（>1000项）

8. 推荐模板

<!-- 标准过滤列表 -->
<ul data-role="listview" data-inset="true" data-filter="true">
  <li data-filtertext="关键词"><a href="#">项</a></li>
</ul>

<!-- 外部搜索框 -->
<input type="search" id="search">
<ul data-role="listview" data-filter="true" data-input="#search">
  <li><a href="#">项</a></li>
</ul>

总结：过滤适用场景

场景推荐
联系人列表data-filter="true"
商品搜索外部输入框
城市选择data-autodividers="true" + 过滤
后台数据表Table + 过滤

需要我为你生成：

  • 实时搜索 + 高亮匹配文字？
  • 分类过滤（多条件）？
  • 本地 JSON 数据过滤？

随时告诉我！

网站 http://yingjuxia.com
文章已创建 2588

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部