Listview Providing richer search content

Description

Add data-filtertext attribute in a particular list item, to find against different content which is popular by one or many names. It helps to match with that content when the word is inserted in the search box.

Example

Following example demonstrates the use of providing richer search content in list in the jQuery Mobile.

Live Demo

<!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>

Output

Let's carry out the following steps to see how the above code works −

Save the above html code as listview_richer_search_content.html file in your server root folder.
Open this HTML file as http://localhost/listview_richer_search_content.html and the following output will be displayed.
Type IT,it,comp, companies, auto etc to see the results.

jquery_mobile_widgets.htm