在 jQuery Mobile 中，过滤（Filtering）是一种通过用户输入实时过滤列表视图中的项的功能。这可以帮助用户快速找到他们感兴趣的内容。以下是一个简单的例子，演示了如何在 jQuery Mobile 中实现列表过滤：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile Listview Filtering</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-3.6.4.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<!-- Listview with Filtering -->
<div data-role="page" id="home">
    <div data-role="header">
        <h1>Listview Filtering Example</h1>
    </div>

    <div data-role="content">
        <label for="filter" class="ui-hidden-accessible">Filter:</label>
        <input type="text" id="filter" data-type="search" placeholder="Filter items...">
        
        <ul data-role="listview" data-filter="true" data-inset="true" data-input="#filter">
            <li><a href="#">Apple</a></li>
            <li><a href="#">Banana</a></li>
            <li><a href="#">Cherry</a></li>
            <li><a href="#">Grapes</a></li>
            <li><a href="#">Orange</a></li>
        </ul>
    </div>

    <div data-role="footer">
        <h4>&copy; 2023 My App</h4>
    </div>
</div>

</body>
</html>

在这个例子中，我们使用了 data-filter="true" 属性来启用列表过滤功能。输入框使用了 data-input="#filter" 属性来指定与之关联的列表。当用户在输入框中输入内容时，列表将动态过滤显示与输入内容匹配的项。

注意：
  •  <label> 元素的 class="ui-hidden-accessible" 用于隐藏屏幕阅读器中的过滤标签。

  •  data-type="search" 属性将输入框样式设置为搜索框。

  •  data-inset="true" 属性用于使列表视图具有内边距，使其更符合 jQuery Mobile 的默认样式。





转载请注明出处：http://www.zyzy.cn/article/detail/14458/jQuery Mobile