📌  相关文章
📜  jQuery Mobile Filterable filterPlaceholder 选项(1)

📅  最后修改于: 2023-12-03 15:02:10.371000             🧑  作者: Mango

jQuery Mobile Filterable filterPlaceholder选项

简介

filterPlaceholder选项是jQuery Mobile Filterable插件提供的一项功能，用于为一个可过滤的列表（filterable list）添加一个placeholder，当用户未输入任何搜索条件时，页面将展示该placeholder，并提示用户进行搜索。

使用方法

在创建可过滤的列表时，将filterPlaceholder选项设置为一个字符串即可：

$(document).on("pagecreate", "#myPage", function() {
  $("#myFilterableList").filterable({
    filterPlaceholder: "Search for items..."
  });
});

以上代码创建了一个id为myFilterableList的可过滤列表，并设置了其filterPlaceholder为“Search for items…”。

注意事项
  • filterPlaceholder选项只在用户未输入任何搜索条件时显示，每当用户在搜索栏中输入内容时，placeholder即会消失。
  • 过多的文字可能会导致placeholder显示不全，应当注意字数限制。
  • filterPlaceholder选项仅适用于可过滤的列表（filterable list），不能用于其他元素。
示例

以下代码为一个含有filterPlaceholder选项的可过滤列表样例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Mobile Filterable</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.3.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" id="myPage">
    <div data-role="header">
      <h1>jQuery Mobile Filterable</h1>
    </div>

    <div data-role="content">
      <ul data-role="listview" data-filter="true" data-inset="true" data-input="#myFilter">
        <li><a href="#">Apple</a></li>
        <li><a href="#">Banana</a></li>
        <li><a href="#">Cherry</a></li>
        <li><a href="#">Dates</a></li>
        <li><a href="#">Elderberry</a></li>
      </ul>

      <form>
        <input id="myFilter" data-type="search" placeholder="Search for fruits...">
      </form>
    </div>

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

  <script>
    $(document).on("pagecreate", "#myPage", function() {
      $("#myFilterableList").filterable({
        filterPlaceholder: "Search for fruits..."
      });
    });
  </script>
</body>
</html>

该样例将创建一个包含五个水果名字的可过滤列表，同时在搜索栏中添加了filterPlaceholder：“Search for fruits...”。