jQuery Mobile Listview filterCallback Option

Last Updated : 12 Feb, 2022

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

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

jQuery Mobile Listview filterReveal Option

Kanchan_Ray

Improve

Article Tags :

jQuery Mobile Listview filterCallback Option

Similar Reads

Thank You!

What kind of Experience do you want to share?