jQuery Mobile Listview filter Option

Last Updated : 20 Dec, 2021

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=
"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>
</head>

<body>
    <h4>GeeksforGeeks filter option Listview</h4>
    <ul class="items" data-role="listview">
        <li>
            <a href=
"https://www.geeksforgeeks.org/data-structures" 
               target="_blank">
              Data Structures
            </a>
        </li>
        <li>
            <a href=
"https://www.geeksforgeeks.org/courses/complete-interview-preparation"
               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 disabled Option

manavsarkar07

Improve

Article Tags :

jQuery Mobile Listview filter Option

Similar Reads

Thank You!

What kind of Experience do you want to share?