jQuery Mobile Listview filterReveal Option

Last Updated : 29 Dec, 2021

jQuery Mobile is a set of HTML5 based user interaction widget toolbox used for various purposes build on top of jQuery. It is designed to build fast and responsive websites accessible to mobile, tabs, and desktops. jQuery Listview is a widget used to create beautiful lists. It is a simple and responsive listview used to view the unordered lists.

In this article, we will be using the jQuery Mobile Listview filterReveal option. The filterReveal option is used to hide or show the search result list in the filter option of the Listview. If true, the list hides when the search text is empty otherwise it shows the full list of items. It also changes the data-filter-reveal as true for the unordered list.

Syntax: We need to pass either true or false as a parameter to filterReveal. Use the following syntax for initialization.

$(".items").listview({
    filterReveal:true,
});

Get the filterReveal option:

var filterRevealOption = 
    $(".items").listview( "option", "filterReveal" );

Set the filterReveal option:

$(".items").listview( "option", "filterReveal", true );

CDN Links: Use the following CDNs of jQuery Mobile for your project.

<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.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example: In the following example, we are setting the option filterReveal to true.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <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.1.min.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3>jQuery Mobile Listview filterReveal Option</h3> 
    <ul class="items" data-filter-reveal="true"> 
        <li> 
            <a href= 
"https://www.geeksforgeeks.org/data-structures" 
               target="_blank"> 
               Data Structures 
            </a>  
        </li> 
        <li>  
            <a href= 
"https://www.geeksforgeeks.org/courses/complete-interview-preparation"
               target="_blank"> 
               Interview preparation 
            </a>  
        </li> 
        <li>  
            <a href="https://www.geeksforgeeks.org/java"
               target="_blank"> 
               Java Programming 
            </a>  
        </li> 
    </ul> 
    <script> 
    $(".items").listview({ 
        filter: true, 
        filterReveal: true, 
    }); 
    </script> 
</body> 
  
</html>