jQuery Mobile - Filter Reveal

Description

Filter reveal feature will allow you to build a simple autocomplete easily with local data.

You can use data-filter-reveal = "true" attribute to auto hide all of the list items when the text field used for searching is blank.

Example

Following example demonstrates the use of filter reveal in jQuery Mobile.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Filter Reveal</title>
      <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>
      <ul data-role = "listview" data-filter = "true" data-filter-reveal = "true" 
         data-filter-placeholder = "Search your products..." data-inset = "true">
         <li><a href = "#">Electronics</a></li>
         <li><a href = "#">Clothing</a></li>
         <li><a href = "#">Home and furnitures</a></li>
         <li><a href = "#">Media and books</a></li>
         <li><a href = "#">Babies and kids</a></li>
         <li><a href = "#">Mobile and tablets</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 filterable_reveal.html file in your server root folder.
Open this HTML file as http://localhost/filterable_reveal.html and the following output will be displayed.

jquery_mobile_widgets.htm

Kickstart Your Career

Get certified by completing the course

Get Started