Skip to content
Related Articles

Related Articles

Improve Article
How to design filter widget for mobiles using jQuery plugin ?
  • Last Updated : 25 Oct, 2020

In this article, we will learn how to design a filterable widget for the user interface of mobile applications using the jQuery filter bar plugin. The plugin works with many HTML controls like select, buttons, tables, control groups.

Download the required pre-compiled files from this link and save it in your working folder for the implementation of the following examples.

Example 1: The following example demonstrates the filter widget. To create the filter feature, add data-filter= ” true” for the HTML element. In this case, it’s done for the “ul” element. Other attributes of the plugin can also be set as per the need.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href="css.css" />
  
    <script src=
    </script>
  
    <script src="jqm.js"></script>
</head>
  
<body>
    <div data-role="page">
        <div data-role="content" id="divID">
  
            <p><strong>Listview images</strong></p>
  
  
            <div class="some">
                <ul data-role="listview" 
                    data-inset="true" data-filter="true" 
                    data-target="some"><br>
                    <li>
                        <img src="images/gfg2.JPG" 
                            alt="geeks1" 
                            data-filtertext="gfgFest" 
                            width="250" height="250">
                        gfgFest
                    </li>
                    <li>
                        <img src="images/gfg4.JPG" 
                            alt="geeks2" 
                            data-filtertext="fiesta" 
                            width="200" height="200">
                        fiesta
                    </li>
                    <li>
                        <img src="images/gfg6.PNG" 
                            alt="geeks3" 
                            data-filtertext="CS portal" 
                            width="200" height="200">
                        CS Portal
                    </li>
                    <li>
                        <img src="images/background2.JPG" 
                            alt="geeks4" 
                            data-filtertext="html" 
                            width="200" height="200">
                        html
                    </li>
                    <li>
                        <img src="images/background3.JPG" 
                            alt="geeks5" 
                            data-filtertext="css" 
                            width="200" height="200">
                        css
                    </li>
                </ul>
            </div>
            <!-- End div content -->
        </div>
        <!-- End div page -->
    </div>
</body>
  
</html>

Output: 



  • Before filter: 
     

  • After filter: 
     

Example 2: In the following data-filter is set to “true” for the HTML table.

html




<!DOCTYPE html>
<html>
  
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href="css.css" />
  
    <script src=
    </script>
  
    <script src="jqm.js"></script>
</head>
  
<body>
    <div data-role="page">
        <div data-role="content" id="divID">
  
            <p>
                <strong>
                    Table
                </strong>
            </p>
  
            <div class="tableWrap">
                <table cellspacing="0" 
                    class="ui-responsive table-stroke" 
                    data-role="table" id="sample"
                    data-mode="columntoggle" 
                    data-filter="true">
                    <thead>
                        <tr>
                            <th rowspan="2">
                                Company
                            </th>
                            <th rowspan="2" 
                                data-sortable="true" 
                                data-priority="6">
                                Last Trade
                            </th>
                            <th rowspan="2" 
                                data-priority="3" 
                                data-sortable="true">
                                Trade Time
                            </th>
                            <th rowspan="2" 
                                data-priority="5" 
                                data-sortable="true">
                                Open</th>
                        </tr>
                    </thead>
                    <tbody class="table_body">
                        <tr>
                            <th><span class="co-name">
                                Google Inc.
                            </span></th>
                            <td>597.74</td>
                            <td>12:12PM</td>
                            <td>597.95</td>
                        </tr>
  
                        <tr>
                            <th><span class="co-name">
                                Apple Inc.
                            </span></th>
                            <td>378.94</td>
                            <td>12:22PM</td>
                            <td>381.02</td>
                        </tr>
  
                        <tr>
                            <th><span class="co-name">
                                Amazon.com Inc.
                            </span></th>
                            <td>191.55</td>
                            <td>12:23PM</td>
                            <td>194.99</td>
                        </tr>
  
                        <tr>
                            <th><span class="co-name">
                                Oracle Corporation
                            </span></th>
                            <td>31.15</td>
                            <td>12:44PM</td>
                            <td>30.67</td>
                        </tr>
  
                        <tr>
                            <th><span class="co-name">
                                Microsoft Corporation
                            </span></th>
                            <td>25.50</td>
                            <td>12:27PM</td>
                            <td>25.37</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- End div content -->
        </div>
        <!-- End div page -->
    </div>
</body>
  
</html>

Output:

  • Before filter: 
     

  • After filter: 
     




My Personal Notes arrow_drop_up
Recommended Articles
Page :