Open In App

jQuery Mobile Listview filter Option

Improve
Improve
Like Article
Like
Save
Share
Report

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 filter option. The filter option adds a search bar on the top of ListView. It searches from list items in the ListView automatically and hides the items that don’t match.

Syntax: The filter takes a boolean value. If true, the search bar appears on the top of the listview.

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

CDN Links: 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: In the following example, we have used the filter option for our listview.

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" />
    <title>GeeksforGeeks</title>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h4>GeeksforGeeks filter option Listview</h4>
    <ul class="items" data-role="listview">
        <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,
        });
    </script>
</body>
</html>


Output:

jQuery Mobile Listview filter Option



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