使用 CSS:not 與 data-index 即時搜尋頁面

去年看了一篇文章「Client-side full-text search in CSS」可以在單一頁面即時搜尋資料,覺得非常的好用,之前也有在粉絲團分享過這篇文章。原本不打算重新寫教學(因為原作者已寫的很詳細),但是最近發現有朋友不知道這功能,所以轉念想想,還是記錄下來順便推廣一下這好用的功能吧 🙂

我有將這個功能實作在前公司的網站(fanxin.tv),如果你有登入,可以進入我的動態點選「朋友列表」或「尋友工具」的分頁觀看效果,或者可以參考以下我用 codepen 做的範例:http://codepen.io/mukiwu/pen/tyFnE
直接在搜尋框打上要搜尋的人名(可以用J,j搜尋),可以看到頁面即時篩選出正確的名字:

See the Pen tyFnE by MUKi (@mukiwu) on CodePen.

這個範例有搭配 JavaScript,原作者使用的是原生的 JavaScript,而我為了稍作區別,將它改成了 jQuery,所以想了解怎麼用 jQuery 寫的朋友可以參考我的範例 🙂

這個即時頁面使用了:not以及data-*完成(不得不說,data-*真的超好用的 XD),以下簡單介紹如何使用它們達成該功能。

在 html 加入 data-* 屬性

從頁面看,感覺是搜尋類別name,但其實我們要在name的父層wrap加上data-index,利用data-index做搜尋,而不是用name
因此可以看到我在每個wrap的裡面加上了data-index,值跟name一樣都是填上名字。
(第 1 & 3 行、第 5 & 7 行)

<div class="wrap" data-index="ju chu ko">
    <img src="http://lorempixel.com/40/40/people/1" border="0" />
    <div class="name">Ju Chu Ko</div>
  </div>
  <div class="wrap" data-index="browny lin">
    <img src="http://lorempixel.com/40/40/people/2" border="0" />
    <div class="name">Browny Lin&lt</div>
</div>

唯一不同的是,即使原本的 name 有大小寫,我在data-index一律改成小寫表示,如果要透過後端產生資料,可以從後端作處理,在樣板輸出的時候就先將大寫轉成小寫。

使用 :not 屬性做篩選

接著我們在 HTML 頁面加入以下語法(可以加在搜尋框的後面):

<style id="m-search"></style>

我們會利用 jQuery 動態在style id="m-search"裡加入:not語法,這樣就可以即時在頁面做篩選了。

:not是 CSS 的偽元素,跟 :nth-child有異曲同工之妙,他可以幫我們做到元素篩選,假設今天我們搜尋「j」,希望出現所有名字有「j」的人,可以利用:not寫成:

<style id="m-search">
  .wrap:not([data-index*="j"]) {
    display: none;
}
</style>

這段意思是:「只要data-index的值沒有 J,就隱藏他」。

使用data-index*=是因為我們要做模糊比對,只要data-index有出現這個字都可以,畢竟我們不希望只搜尋字首或字尾,而是搜尋全部。

利用 jQuery 即時搜尋

最後,就可以利用 jQuery 即時搜尋,只要搜尋框有「改變、鍵盤輸入、貼上」等事件,我們就即時在style id="m-search"裡加入:not篩選,而他的篩選依據就是我們搜尋框的值:

var that = $(this);
var mSearch = $("#m-search");
$("#search-input").bind("change paste keyup", function(){
  var value = $(this).val();
  if (!value) {
    mSearch.html("");
    return;
  }; 
  mSearch.html('.wrap:not([data-index*="' + value.toLowerCase() + '"]) {display: none;}');
});

結語

以上就是整個過程,只要利用 CSS 以及 JavaScript(jQuery) 就可以做到即時搜尋,但是他只能搜尋這個頁面的東西,畢竟只是單純抓取 HTML DOM,如果要搜尋後端資料,還是要用 ajax 囉。

最後再放上我的 codepen 範例,裡面有完整的語法以及實作:http://codepen.io/mukiwu/pen/tyFnE
直接在搜尋框打上要搜尋的人名(可以用J,j搜尋),可以看到頁面即時篩選出正確的名字:

See the Pen tyFnE by MUKi (@mukiwu) on CodePen.

相關 jQuery 插件應用

3/12 更新:
已經有人將該功能做成 jQuery 插件釋出,有興趣想玩玩看的朋友,可以直接套用 jQuery 插件喔。
插件安裝與介紹:https://github.com/dca/jquery-msearch