Open In App

jQuery Mobile Listview filterCallback Option

Improve
Improve
Like Article
Like
Save
Share
Report

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops.

In this article, we will be using the jQuery Mobile Listview filterCallback option. This option is of a function type that is used to determine which rows to hide when the search filter textbox changes. 

Note: This option has been deprecated in 1.4.0 and going to be removed in 1.5.0. It is now implemented in the filterable widget.

Syntax:

$( document ).on( "mobileinit", function() {
  $.mobile.listview.prototype.options.filterCallback
     = function( text, searchValue ) {
  
    // Only show items that *begin* 
    // with the search string
    return text.toLowerCase().substring( 
      0, searchValue.length ) !== searchValue;
  };
});

Parameters: The function accepts two parameters that are the text of the list item and the search string. 

Return type: This function returns true to hide the item, false to leave it visible.

CDN Link: First, add jQuery Mobile scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css”> 
<script src=”//code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js”></script>

Example: This example demonstrates the jQuery Mobile Listview filterCallback option.

HTML




<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
    <script src=
"//code.jquery.com/jquery-3.2.1.min.js">
    </script>
    <script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
    </script>
</head>
  
<body>
    <center>
        <div data-role="page">
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
            <h3>jQuery Mobile Listview filterCallback Option</h3>
            <div id="divID">
                <div role="main" class="ui-content">
                    <ul data-role="listview">
                        <li><a href="index.html">
                                GeeksforGeeks
                            </a>
                        </li>
                        <li><a href="index.html">
                                GFG
                            </a>
                        </li>
                        <li><a href="index.html">
                                gfg
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </center>
    <script>
        $(document).ready(function () {
            $(document).on("mobileinit", function () {
                $.mobile.listview.prototype.options.filterCallback = 
                              function (text, searchValue) {
                    return text.toLowerCase().substring(0, 
                              searchValue.length) !== searchValue;
                };
            });
        });
    </script>
</body>
  
</html>


Output:

jQuery Mobile Listview filterCallback Option

jQuery Mobile Listview filterCallback Option

Reference: https://api.jquerymobile.com/listview/#option-filterCallback



Last Updated : 12 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads