<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Title</title>
<script src="../jquery-2.2.4.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed"><h1>这是头部</h1></div>
<div role="main" class="ui-content">
<!--普通listView-->
<ul data-role="listview">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
<li><a>D</a></li>
</ul>
<br/>
<!--具有搜索功能的listView-->
<ul data-role="listview" data-filter="true" >
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
<li><a>D</a></li>
</ul>
<br>
<!--过滤搜索隐藏列表-->
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search Alphabet">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
<li><a>D</a></li>
</ul>
<br/>
<!--过滤搜索隐藏列表,另一种写法-->
<form class="ui-filterable">
<input id="auto-input" data-type="search" placeholder="Search Alphabet">
</form>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search Alphabet"
data-input = '#auto-input'>
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
<li><a>D</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1>这是底部</h1>
</div>
</div>
</body>
</html>
