jQuery Mobile is a set of HTML5 based user interaction widget toolbox used for various purposes build on top of jQuery. It is designed to build fast and responsive websites accessible to mobile, tabs, and desktops. 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 be using the jQuery Mobile Listview filterReveal option. The filterRevealoption is used to hide or show the search result list in the filter option of the Listview. Iftrue, the list hideswhen the search text is empty otherwiseit shows the full list of items. It also changes the data-filter-revealastrue for the unordered list.

Syntax: We need to pass either trueor falseas a parameter to filterReveal. Use the following syntax for initialization. 

$(".items").listview({
    filterReveal:true,
});

• Get the filterReveal option:

  var filterRevealOption = 
      $(".items").listview( "option", "filterReveal" );

• Set the filterReveal option:

  $(".items").listview( "option", "filterReveal", true );

CDN Links: Use the following CDNs of jQuery Mobile 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: In the following example, we are setting the option filterRevealto true.

Output:

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