jQuery Mobile Filterable filterReveal Option

Last Updated : 26 Jan, 2022

jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. Filterable is a widget that can filter the children of any element. A Form, List, etc can be filtered with the help of filterable. A search bar appears at the top of the List where the search text is written.

In this article, we are going to learn the jQuery Mobile Filterable filterReveal Option. The filterReveal option sets whether the items should be visible or not if the search text is empty. If true, the items won’t be visible if the search is empty and vice versa. The default value is set to false.

Syntax: The filterReveal option takes a boolean value and is initialized as follows:

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

Get the filterReveal option

var filterRevealOpt = $(".items")
.filterable("option", "filterReveal");

Set the filterReveal option

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

CDN Links: Use the following CDNs for the jQuery Mobile 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, the filterReveal option is set 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; text-align: center;"> 
        GeeksforGeeks 
    </h1> 
    <h3 style="text-align: center;"> 
      jQuery Mobile Filterable filterReveal Option 
    </h3> 
    <ul class="items"> 
        <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").filterable({ 
        filterReveal: true, 
    }); 
    </script> 
</body> 
  
</html>