jQuery Mobile - SPLessons

jQuery Mobile Filter

Home > Lesson > Chapter 17
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

jQuery Mobile Filter

jQuery Mobile Filter

shape Description

"jQuery Mobile Filter" chapter explains about how to filter items in a given list or given set of elements. By setting data-filter="true", children of any element can be filtered. Every child's text is used for filtering by default, however, an option is there to set the data-filtertext attribute on any child element string value that is taken for filtering to associate custom filter text instead.

Basic Filter

shape Description

The attribute data-filter="true" on listview is used to create a filter for the list items.This is achieved by adding ui-filterable class to the form in which search input is wrapped and add data-input ="#id" attribute to listview ul and data-type="search" attribute to <input> element. Eg-1: [html] <input id="filter1" data-type="search" placeholder="Search"> <ul data-role="listview" data-filter="true" data-input="#filter1"> <li><a href="https://www.google.com">Google Chrome</a></li> <li><a href="#">Firefox</a></li> <li><a href="#">Safari</a></li> </ul> [/html] Eg-2: [html] <input id="filter2" data-type="search" placeholder="Search"> <ul data-role="listview" data-filter="true" data-input="#filter2"> <li data-filtertext="browser"><a href="#">Google Chrome</a></li> <li><a href="#">Firefox</a></li> <li><a href="#">Safari</a></li> </ul> [/html] jQuery Mobile Filter is not limited to listview, it can also be used on select, collapsible set, table, control group, or anything inside <div&gt; with <p> element.

shape Example

Example of table filter [html] <html> <head> <meta charset="UTF-8"> <title>Listview</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> <!-- jQuery CDN hosted files --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <input id="filter3" data-type="search" placeholder="Search"> <table data-role="table" class="ui-responsive ui-shadow" id="mytable" data-filter="true" data-input="#filter3"> <thead> <tr> <th data-priority="6">Employee ID</th> <!--lowest priority --> <th>Employee Name</th> <!-- This will never be hidden --> <th data-priority="1">Employee Email-ID</th> <!-- highest priority --> <th data-priority="3">Employee Phone Number</th> <th data-priority="4">Employee Country</th> </tr> </thead> <tbody> <tr> <td>Ed01</td> <td>John B</td> <td>john@gmail.com</td> <td>0895634231</td> <td>US</td> </tr> <tr> <td>Ed02</td> <td>Lewis</td> <td>lewis@gmail.com</td> <td>0895894231</td> <td>Germany</td> </tr> <tr> <td>Ed03</td> <td>Krish</td> <td>krish@gmail.com</td> <td>0892394231</td> <td>UK</td> </tr> </tbody> </table> </body> </html> [/html] Output: When searched for a particular employee, th eoutput will be as follows.

Filter Reveal

shape Description

Simple autocomplete with local data can be easily built with the feature Filter Reveal. The data-filter-reveal="true" attribute holding filter, auto-hides all the list items when nothing is entered in the search field. The attribute placeholder specifies the placeholder text for the jQuery Mobile Filter. Eg: [html] <input id="filter4" data-type="search" placeholder="Search Country"> <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-inset="true" data-input="#filter4"> <li><a href="#">India</a></li> <li><a href="#">United Kingdom</a></li> <li><a href="#">Germany</a></li> <li><a href="#">United States</a></li> <li><a href="#">South Africa</a></li> <li><a href="#">Austrelia</a></li> </ul> [/html]

shape Example

[html] <html> <head> <meta charset="UTF-8"> <title>Listview</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> <!-- jQuery CDN hosted files --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <form class="ui-filterable"> <input id="filter1" data-type="search" placeholder="Search"> </form> <ul data-role="listview" data-filter="true" data-input="#filter1"> <li><a href="http://www.splessons.com">SPLessons</a></li> <li><a href="http://itoolsinfo.com/">iToolsinfo.com</a></li> <li><a href="#">Safari</a></li> </ul> <form class="ui-filterable"> <input id="filter2" data-type="search" placeholder="Search"> </form> <ul data-role="listview" data-filter="true" data-input="#filter2"> <li data-filtertext="browser"><a href="#">Google Chrome</a></li> <li><a href="#">Firefox</a></li> <li><a href="#">Safari</a></li> </ul> <form class="ui-filterable"> <input id="filter3" data-type="search" placeholder="Search"> </form> <table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" data-column-btn-text="Click here!" id="mytable" data-filter="true" data-input="#filter3"> <thead> <tr> <th data-priority="6">Employee ID</th> <!--lowest priority --> <th>Employee Name</th> <!-- This will never be hidden --> <th data-priority="1">Employee Email-ID</th> <!-- highest priority --> <th data-priority="3">Employee Phone Number</th> <th data-priority="4">Employee Country</th> </tr> </thead> <tbody> <tr> <td>Ed01</td> <td>John B</td> <td>john@gmail.com</td> <td>0895634231</td> <td>US</td> </tr> <tr> <td>Ed02</td> <td>Lewis</td> <td>lewis@gmail.com</td> <td>0895894231</td> <td>Germany</td> </tr> <tr> <td>Ed03</td> <td>Krish</td> <td>krish@gmail.com</td> <td>0892394231</td> <td>UK</td> </tr> </tbody> </table> <form class="ui-filterable"> <input id="filter4" data-type="search" placeholder="Search Country"> </form> <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-inset="true" data-input="#filter4"> <li><a href="#">India</a></li> <li><a href="#">United Kingdom</a></li> <li><a href="#">Germany</a></li> <li><a href="#">United States</a></li> <li><a href="#">South Africa</a></li> <li><a href="#">Austrelia</a></li> </ul> </body> </html> [/html] Output: When searched for a particular country, the output will be as follows.

Summary

shape Key Points

  • data-filter="true" attribute is used to filter any child elements.
  • he data-filter-reveal="true" attribute holding filter, auto-hides all the list items when nothing is entered in the search field.