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

我有將這個功能實作在前公司的網站，如果你有登入，可以進入我的動態點選「朋友列表」或「尋友工具」的分頁觀看效果，或者可以參考以下我用 codepen 做的範例

直接在搜尋框打上要搜尋的人名(可以用 J, j 搜尋)，可以看到頁面即時篩選出正確的名字

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

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

在 html 加入 data-* 屬性

從頁面看，感覺是搜尋類別 name ，但其實我們要在 name 的父層 wrap 加上 data-index ，利用 data-index 做搜尋，而不是用 name 。

因此可以看到我在每個 wrap 裡加上了 data-index ，值跟 name 一樣都是填上名字。(第 1 & 3 行、第 6 & 8 行)

<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 囉。

相關 jQuery 插件應用

3/12 更新：

有朋友將該功能做成 jQuery 插件釋出，有興趣想玩玩看的話，可以直接套用 jQuery 插件喔。

插件安裝與介紹：https://github.com/dca/jquery-msearch