列表檢視提供更豐富的搜尋內容

說明

在特定的列表項中新增 data-filtertext 屬性，查詢具有不同內容的專案，這些專案通常由一個或多個名稱廣為人知。在搜尋框中插入單詞時，它有助於與該內容匹配。

示例

以下示例演示瞭如何在 jQuery Mobile 中提供列表中更豐富的搜尋內容。

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <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-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/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:///listview_richer_search_content.html 開啟，將顯示以下輸出。
鍵入IT,、it、comp、 companies、 auto 等 來檢視結果。

jquery_mobile_widgets.htm

列印頁面

上一個

下一個

列表檢視 提供更豐富的搜尋內容

說明

示例

輸出

列表檢視提供更豐富的搜尋內容