jQuery Mobile Filterable filterPlaceholder 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 filterPlaceholder option. The filterPlaceholder option sets the placeholder text as a hint to the search bar.

Syntax: The filterPlaceholder option takes a string value and can be initialized as follows:

$(".items").filterable({
    filterPlaceholder: "Search bar",
});

Get the filterPlaceholder option

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

Set the filterPlaceholder option

$(".items").filterable("option", "filterPlaceholder", 
                         "Search items");

CDN Links: Use the following CDNs for your 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 this example, we have set the filterPlaceholder text to “Search bar“.

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 filterPlaceholder 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({ 
            filterPlaceholder: "Search bar", 
        }); 
    </script> 
</body> 
  
</html>