jQuery Mobile - SPLessons

jQuery Mobile Filter

Chapter 15

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:

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

Eg-2:

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

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

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:

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

shape Example

 
<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="https://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>

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.