以往在一些好友名單,如果要找尋某個人就要一個一個看,懂電腦的會直接Ctrl+F
但對於不懂電腦的,就會先給個搜尋框+按鈕
要嘛針對搜尋的內容做post,整頁refresh,不然就是AJAX搜尋
總而言之就是要經過資料庫,於是找找能不能夠透過javascript 直接在頁面做搜尋,比較快也不會佔用到伺服器資源。
最後找到下面這篇 是用jquery寫的
http://muki.tw/tech/full-text-search-by-css/
看了之後,其實原理就是用了html data-* 的屬性。
在你要搜尋的範圍內加個data 屬性,例如data-index="xxx",js 取得搜尋框的值,並將data-index的值沒有符合搜尋框的都隱藏。
data-屬性 果然好用阿!!
而上面這篇是參考下面這些寫的,下面是以原生的 js code寫的
http://www.redotheweb.com/2013/05/15/client-side-full-text-search-in-css.html
全站熱搜
留言列表