jQuery Mobile - Listview Filter

Description

The list can be filtered by adding the data-filter = "true" attribute. A search box is included above the list and behavior to filter out the list items is added. By default, the theme is inherited from the parents for search box.

Example

Following example demonstrates the use of filter 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 Filter Example</h2>
      <ul data-role = "listview" data-inset = "true" data-filter = "true" 
         data-filter-placeholder = "Search">
         <li><a href = "#">Chennai</a></li>
         <li><a href = "#">Bangalore</a></li>
         <li><a href = "#">Pune</a></li>
         <li><a href = "#">Mumbai</a></li>
         <li><a href = "#">Delhi</a></li>
         <li><a href = "#">Dehradhun</a></li>
         <li><a href = "#">Punjab</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_filter.html file in your server root folder.
Open this HTML file as http://localhost/listview_filter.html and the following output will be displayed.

jquery_mobile_widgets.htm

Kickstart Your Career

Get certified by completing the course

Get Started