jQuery Mobile Filterable enhanced Option

Last Updated : 29 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 tutorial, we are going to learn the jQuery Mobile Filterable enhanced option. The enhanced option indicates whether the original markup necessary for the filterable widget is present or not. Making it true, some options do not work for the first time.

Syntax: The enhanced option takes a boolean value.

Initialize the filterable widget:

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

Get the enhanced option:

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

Set the enhanced option:

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

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

<link href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel=”stylesheet”/>
<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 enhanced option is set to “true” with the filterReveal set to “true” but it doesn’t work because it removes the required markup for the Filterable. But after a single search, the enhanced option is no more in action as the widget is loaded.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <link href= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" 
          rel="stylesheet"/> 
        <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 enhanced 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({ 
                enhanced:true, 
                filterReveal:true, 
            });             
        </script> 
    </body> 
</html> 