博客

jQuery Mobile Filterable enhanced选项

  • Post category:jquery

jQuery Mobile是一个用于开发移动Web应用的JavaScript库，它提供了最常用的组件和接口，使得开发者可以很容易地创建完整的移动Web应用。其中Filterable enhanced是其提供的一个组件，主要用于过滤HTML列表。接下来我将详细讲解如何使用jQuery Mobile Filterable enhanced选项。

1. 概述

Filterable enhanced是jQuery Mobile提供的一个Listview的扩展组件，可以实现在Listview列表中动态搜索和过滤内容，减少用户对大量数据项进行手动滑动查找的操作。使用时需要引入jQuery Mobile，并在HTML标签上添加一些数据属性。

2. 使用步骤

2.1 引入jQuery Mobile

首先需要在文档的头部引入jQuery和jQuery Mobile的JS和CSS文件。

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入jQuery Mobile CSS -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>

<!-- 引入jQuery Mobile JS -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

2.2 使用Listview

Filterable enhanced是Listview的扩展功能，所以我们需要先创建Listview，并在Listview列表中添加数据。

<div data-role="page">
  <div data-role="header">
    <h1>Listview with Filterable enhanced</h1>
  </div>

  <div data-role="content">
    <ul data-role="listview" data-filter="true" data-filter-placeholder="Search...">
      <li><a href="#">Apple</a></li>
      <li><a href="#">Banana</a></li>
      <li><a href="#">Cherry</a></li>
      <li><a href="#">Grape</a></li>
      <li><a href="#">Kiwi</a></li>
      <li><a href="#">Lemon</a></li>
      <li><a href="#">Mango</a></li>
      <li><a href="#">Orange</a></li>
      <li><a href="#">Pineapple</a></li>
    </ul>
  </div>

  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>

2.3 设定Filterable enhanced选项

在Listview的#id或元素标签上添加data-filter=”true”和data-filter-placeholder=”Search…”属性即可开启Filterable enhanced功能，其中data-filter-placeholder属性用于设置搜索框的placeholder。

<ul data-role="listview" data-filter="true" data-filter-placeholder="Search...">

2.4 自定义搜索匹配过滤

Filterable enhanced支持自定义过滤规则，需在ul元素上添加data-filter-text-only=”true”参数，这时搜索规则被限制为只匹配项的文本（会忽略其它所有html信息，例如：图片，链接和HTML标记等等）。

<ul data-role="listview" data-filter="true" data-filter-placeholder="Search..." data-filter-text-only="true">

2.5 根据输入框内容实时监听过滤

通过设置data-input="#id"，可以实现输入框内容变化时实时监听过滤。

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search..." data-input="#filter-input">

在HTML中还需要添加如下的输入框：

<input id="filter-input" data-type="search" placeholder="Search...">

3. 示例说明

3.1 静态搜索

下面的示例中，搜索框的placeholder文本为“Search fruits…”，输入内容后即可实现Listview的静态搜索筛选功能。

<div data-role="page">
  <div data-role="header">
    <h1>Listview with Filterable enhanced</h1>
  </div>

  <div data-role="content">
    <div data-role="fieldcontain">
      <form>
        <label for="filter-input">Search fruits:</label>
        <input type="search" name="filter" id="filter-input" value="" data-mini="true" />
      </form>
    </div>

    <ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits...">
      <li><a href="#">Apple</a></li>
      <li><a href="#">Banana</a></li>
      <li><a href="#">Cherry</a></li>
      <li><a href="#">Grape</a></li>
      <li><a href="#">Kiwi</a></li>
      <li><a href="#">Lemon</a></li>
      <li><a href="#">Mango</a></li>
      <li><a href="#">Orange</a></li>
      <li><a href="#">Pineapple</a></li>
    </ul>
  </div>

  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>

3.2 按钮过滤

下面的示例中，我们添加了一个按钮，当用户点击按钮时触发过滤，筛选出Class为“red”的Listitem。

<div data-role="page">
  <div data-role="header">
    <h1>Listview with Filterable enhanced</h1>
  </div>

  <div data-role="content">

    <ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-filter-reveal="true">
      <li class="red"><a href="#">Apple</a></li>
      <li><a href="#">Banana</a></li>
      <li class="red"><a href="#">Cherry</a></li>
      <li><a href="#">Grape</a></li>
      <li><a href="#">Kiwi</a></li>
      <li><a href="#">Lemon</a></li>
      <li><a href="#">Mango</a></li>
      <li><a href="#">Orange</a></li>
      <li class="red"><a href="#">Pineapple</a></li>
    </ul>

    <a href="#" data-role="button" id="filter-button">Filter Red Fruits</a>

  </div>

  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>

<script>
$(document).on("click","#filter-button", function(){
  $("li").hide();
  $("li.red").show();
});
</script>

4. 总结

通过上述步骤，就可以实现在jQuery Mobile中使用Filterable enhanced组件，完成对Listview列表的搜索和过滤。通过自定义搜索匹配规则、开启键盘监听、过滤一部分的Listitem等方法，可以满足不同场景的业务需求。

Tags: