博客

jQuery Mobile Listview过滤选项

  • Post category:jquery

jQuery Mobile Listview 过滤选项

简介

Listview是jQuery Mobile中非常实用的一个组件，它可以轻松地在页面中呈现一组数据列表，并且提供了众多的交互和样式选项。在实际应用中，由于数据量可能非常大，为了更方便地帮助用户筛选所需的数据，jQuery Mobile提供了Listview过滤选项。

过滤选项的使用

基本用法

为Listview添加过滤选项非常简单，只需要为Listview添加一个内置的文本框即可，jQuery Mobile会自动帮我们完成数据过滤的功能。例如我们有如下的HTML代码：

<div data-role="page">
  <div data-role="header">
    <h1>列表页</h1>
  </div>
  <div data-role="content">
    <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>
      <li><a href="#">小米</a></li>
    </ul>
  </div>
</div>

我们在listview中添加了data-filter="true"，开启了过滤选项，还通过data-filter-placeholder指定了文本框中默认的提示文本。在页面加载完毕后，我们可以在Listview上方看到一个文本框，当我们输入关键字时，Listview会根据我们输入的内容自动进行过滤，只显示匹配的项。

进阶用法

在有些需求中，我们希望能够自定义过滤的算法或样式。此时，jQuery Mobile还提供了一些相关的事件和选项，使我们适应更复杂的场景。例如我们可以通过data-filter-reveal选项来控制搜索结果的显示方式，将其调整为悬浮层的形式：

<div data-role="page">
  <div data-role="header">
    <h1>列表页</h1>
  </div>
  <div data-role="content">
    <ul data-role="listview" 
        data-filter="true" 
        data-filter-reveal="true"
        data-filter-placeholder="请输入关键字...">
      <li><a href="#">苹果</a></li>
      <li><a href="#">三星</a></li>
      <li><a href="#">华为</a></li>
      <li><a href="#">小米</a></li>
    </ul>
  </div>
</div>

在上面的代码中，我们添加了data-filter-reveal="true"选项，将搜索结果以悬浮形式显示在了Listview下面。如果我们希望自己定义过滤算法，就需要使用filter事件，例如：

<div data-role="page">
  <div data-role="header">
    <h1>列表页</h1>
  </div>
  <div data-role="content">
    <ul data-role="listview" 
        data-filter="true" 
        data-filter-reveal="true"
        data-filter-placeholder="请输入关键字...">
      <li><a data-filtertext="Apple">苹果</a></li>
      <li><a data-filtertext="Samsung">三星</a></li>
      <li><a data-filtertext="Huawei">华为</a></li>
      <li><a data-filtertext="Xiaomi">小米</a></li>
    </ul>
  </div>
</div>

在上面的代码中，我们为每个列表项的<a>标签添加了data-filtertext属性，指定了过滤所用的文本。然后在JavaScript中添加filter事件的处理函数，将过滤的算法按需进行自定义：

$(document).on("filter", function(e, data) {
  var val = data.input.value.toLowerCase();
  $("ul[data-role='listview'] li").each(function() {
    var text = $(this).text().toLowerCase();
    var filtertext = $(this).find("a").data("filtertext").toLowerCase();
    var show = (text.indexOf(val) >= 0 || filtertext.indexOf(val) >= 0);
    $(this).toggle(show);
  });
});

在代码中，我们首先获取了当前输入框中的文本内容，然后遍历所有的Listview项，根据data-filtertext属性的值进行匹配，并添加了相应的show和toggle效果。

示例说明

示例一

下面是一个简单的Listview过滤选项的示例，你可以尝试在搜索框中输入相关文本来测试效果：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Listview过滤选项示例</title>
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="//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>Listview过滤选项示例</h1>
      </div>
      <div data-role="content">
        <ul data-role="listview" data-filter="true" 
            data-filter-reveal="true" data-filter-placeholder="请输入关键字...">
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
          <li><a href="#">Item 4</a></li>
          <li><a href="#">Item 5</a></li>
          <li><a href="#">Item 6</a></li>
          <li><a href="#">Item 7</a></li>
          <li><a href="#">Item 8</a></li>
          <li><a href="#">Item 9</a></li>
          <li><a href="#">Item 10</a></li>
          <li><a href="#">Item 11</a></li>
          <li><a href="#">Item 12</a></li>
          <li><a href="#">Item 13</a></li>
          <li><a href="#">Item 14</a></li>
          <li><a href="#">Item 15</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

示例二

下面是一个自定义过滤算法的示例，你可以尝试在搜索框中输入相关关键字测试效果：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Listview自定义过滤示例</title>
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script>
      $(document).on("filter", function(e, data) {
        var val = data.input.value.toLowerCase();
        $("ul[data-role='listview'] li").each(function() {
          var text = $(this).text().toLowerCase();
          var filtertext = $(this).find("a").data("filtertext").toLowerCase();
          var show = (text.indexOf(val) >= 0 || filtertext.indexOf(val) >= 0);
          $(this).toggle(show);
        });
      });
    </script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>Listview自定义过滤示例</h1>
      </div>
      <div data-role="content">
        <ul data-role="listview" data-filter="true" 
            data-filter-reveal="true" data-filter-placeholder="请输入关键字...">
          <li><a data-filtertext="Apple" href="#">苹果</a></li>
          <li><a data-filtertext="Samsung" href="#">三星</a></li>
          <li><a data-filtertext="Huawei" href="#">华为</a></li>
          <li><a data-filtertext="Xiaomi" href="#">小米</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
Tags: