How to design filter widget for mobiles using jQuery plugin ?

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output: 



  • Before filter: 
     

  • After filter: 
     

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

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before filter: 
     

  • After filter: 
     

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.