HTML5 · 2015年2月10日 0

jQuery Mobile实现搜索框(图) 

Part1:
jQuery Mobile实现搜索框(图) - 东辰 - 我的博客

 <section id=”page1″ data-role=”page”>
<header data-role=”header”>

<h1>jQuery Mobile</h1>

</header> 

<div class=”content” data-role=”content”>

<h3>Search Input</h3>
<form id=”myform” action=”formprocessor.php” method=”post”>

<div data-role=”fieldcontain”>
<label for=”search-restaurants”>Search Restaurants:</label>
<input type=”search” name=”search-restaurants” id=”search-restaurants” />

</div> 

</form>

</div>

<footer data-role=”footer”>

<h1>O’Reilly</h1>

</footer> 

</section> 


 
 
Part2:
在列表上方,添加搜索框,只需要添加data-filter="true"就行。
添加placeholder的方法:data-filter-placeholder="Filter items..."
jQuery Mobile实现搜索框(图) - 东辰 - 我的博客
 
<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Filter items...">
 
此时,筛选是自动的。
(If you begin typing in the previous field, the list automatically filters out the resultsas you type)

jQuery Mobile实现搜索框(图) - 东辰 - 我的博客

 

Share this: