Open In App

jQuery Mobile Listview filterPlaceholder Option

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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>
            <a href="https://www.geeksforgeeks.org/java" 
                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



Last Updated : 23 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads