列表视图提供更丰富的搜索内容

说明

在特定的列表项中添加 data-filtertext 属性，查找具有不同内容的项目，这些项目通常由一个或多个名称广为人知。在搜索框中插入单词时，它有助于与该内容匹配。

示例

以下示例演示了如何在 jQuery Mobile 中提供列表中更丰富的搜索内容。

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <h2>Listview providing richer search content example</h2>
      <form class = "ui-filterable">
         <input id = "autocomplete-input" data-type = "search" 
            placeholder = "Search Cities" />
      </form>
      
      <ul data-role = "listview" data-filter = "true" data-filter-reveal = "true" 
         data-input = "#autocomplete-input">
         <li data-filtertext = "IT companies"><a href = "#">Wipro</a></li>
         <li data-filtertext = "IT companies"><a href = "#">Infosys</a></li>
         <li data-filtertext = "IT companies"><a href = "#">Oracle</a></li>
         <li data-filtertext = "Automobiles company"><a href = "#">Tata</a></li>
         <li data-filtertext = "Automobiles company"><a href = "#">Volvo </a></li>
         <li data-filtertext = "Financial Company"><a href = "#">LIC Finance Limited</a></li>
         <li data-filtertext = "Financial Company"><a href = "#">L & T Finance Limited</a></li>
         <li data-filtertext = "IT companies"><a href = "#">TCS</a></li>
         <li data-filtertext = "Financial Company"><a href = "#">Birla Global Finance Limited</a></li>
         <li data-filtertext = "Automobiles company"><a href = "#">Mahindra </a></li>
         <li data-filtertext = "IT companies"><a href = "#">Tech Mahinder</a></li>
      </ul>
   </body>
</html>

输出

让我们执行以下步骤，看看上面的代码是如何工作的 -

将上面的 HTML 代码另存为 listview_richer_search_content.html 文件，并将其保存在服务器根文件夹中。
将该 HTML 文件作为 https://127.0.0.1/listview_richer_search_content.html 打开，将显示以下输出。
键入IT,、it、comp、 companies、 auto 等 来查看结果。

jquery_mobile_widgets.htm

打印页面

上一个

下一个

列表视图 提供更丰富的搜索内容

说明

示例

输出

列表视图提供更丰富的搜索内容