Filtering Data items with Jquery Mobile
Normally, we have seen when there is large amount of data items it is difficult to find out what we want. But with the help of Jquery Mobile it is easy to filter data items for getting particular result that we want to see. So here.. it is a script that filter the items. In this script, I have added some JavaScript files which will help us to implement this thing.
HTML SCRIPT
<html>
<title>
Filtering Items with Jquery Mobile
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Filtering Items with Jquery Mobile
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/jquery.mobile-1.4.5.min.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<body>
<div data-role="header" data-theme="b">
<h1>Filtering Items with Jquery Mobile</h1>
</div>
<form class="ui-filterable">
<input id="filterdata" data-type="search" placeholder="Enter Fruit name" >
</form>
<ul data-role="listview" data-filter="true" data-input="#filterdata">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<body>
<div data-role="header" data-theme="b">
<h1>Filtering Items with Jquery Mobile</h1>
</div>
<form class="ui-filterable">
<input id="filterdata" data-type="search" placeholder="Enter Fruit name" >
</form>
<ul data-role="listview" data-filter="true" data-input="#filterdata">
<li>Blue Berries </li>
<li>Grapes </li>
<li>Pineapple </li>
<li>Orange </li>
<li>Grapes </li>
<li>Pineapple </li>
<li>Orange </li>
<li>Apricot </li>
</ul>
</ul>
</body>
</html>
</html>
Comments
Post a Comment