jQuery Mobile Listview filterPlaceholder Option
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. 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 learn to implement the filterPlaceholder option in jQuery Mobile. The filterPlaceholder is the text that should appear in the place of the search bar of the listview filter option.
The filterPlaceholder is deprecated for the listview. So we need to use the filterable widget which works the same as the filter option.
Syntax:
Initialize the listview with the filterPlaceholder option specified:
$("#items").listview({
filter:true,
});
$("#items").filterable({
filterPlaceholder:"text...",
});Get or set the filterPlaceholder option, after initialization:
// Getter
var filterPlaceholder = $( ".selector" )
.listview( "option", "filterPlaceholder" );
// Setter
$( ".selector" ).listview( "option",
"filterPlaceholder", "Search..." );CDN Link: First, add jQuery Mobile scripts needed 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: The following code used the filterPlaceholder option for the jQuery mobile.
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= </script> <script src= </script></head> <body> <h1>GeeksforGeeks</h1> <h3>jQuery Mobile Listview filterPlaceholder option</h3> <ul id="items"> <li> <a href= target="_blank"> Data Structures </a> </li> <li> <a href= target="_blank"> Interview preparation </a> </li> <li> target="_blank"> Java Programming </a> </li> </ul> <script> $("#items").listview({ filter: true }); $("#items").filterable({ filterPlaceholder: "Search tutorials" }); </script></body> </html> |
Output:
Reference: https://api.jquerymobile.com/listview/#option-filterPlaceholder
Please Login to comment...