摘要:JQueryMobile 實用的 listview filter
通常我們在做搜尋的功能，不外乎就是要用到後端 server 的技術，
結果前一陣子看了一篇文章：
http://redotheweb.com/2013/05/15/client-side-full-text-search-in-css.html
發現也可以單純使用 CSS 的方式就能完成單一頁面的簡單搜尋，
讓我靈機一動想到，該不會 JQueryMobile 也有類似的功能吧？
上了 JQueryMobile 的官網，發現還真的有類似的功能，就叫做 ListView Filter，
就是單純可以搜尋清單內的關鍵字，達到快速查詢的功能，
實際測試了一下發現還滿方便，
雖然單純利用前端的方式查詢，在功能上遠不如查詢後端 server 來得便利，
但對於不少較為單純的網頁或清單格式，甚至是沒有辦法架設 server 的靜態網站，
都相當的實用，
這是實際做出來的樣子 ( 按下 preview 就可以測試 )：
http://jqmdesigner.appspot.com/designer.html#&ref=5925321815621632
程式碼只需要少少的幾行，重點是在 ul 的地方加上 data-filter="true" ：
<ul data-role="listview" data-inset="true" data-filter="true">
<li data-role="list-divider">Divider</li>
<li>
<a href="#">
<img src="http://jqmdesigner.appspot.com/images/image.png" class="ui-li-icon">王大明</a>
</li>
<li>
<a href="#">
<img src="http://jqmdesigner.appspot.com/images/image.png" class="ui-li-icon">孫小美</a>
</li>
<li>
<a href="#">
<img src="http://jqmdesigner.appspot.com/images/image.png" class="ui-li-icon">阿匹婆</a>
</li>
<li>
<a href="#">
<img src="http://jqmdesigner.appspot.com/images/image.png" class="ui-li-icon">馬小九</a>
</li>
<li>
<a href="#">
<img src="http://jqmdesigner.appspot.com/images/image.png" class="ui-li-icon">藍小龍</a>
</li>
</ul>
此外，
JQueryMobile 的設計原本就是針對手機版的網頁，
在講求手機與頻寬的時代，這樣子的設計方式也相當符合大家的操作行為，
自己在撰寫程式上也很方便，推薦這個 JQueryMobile 的功能給大家喔！