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.

Output:

jQuery Mobile Listview filterCallback Option

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