[JS] 用 jQuery 作 Live Search

記錄一下自己的實作方式。

有使用過 OSX 系統的人應該常會在應用程式的搜尋框中看到 Live Search 的影子(e.g., iTunes 的搜尋),簡單地說就是你在打 keyword 的時候,不等你全部輸入完就去作 search 的動作,說不定在打完全部 keyword 前就找到你要的結果了。

所以簡單的 markup 可能會長這樣:

(type="search" 是 Safari/WebKit 獨有的,在一般的 browser 它會變成一般的 type="text",在這裡沒差)

然後就是寫上 JavaScript 的 code 啦,這裡我用 jQuery 的語法:

幾個(自認)比較關鍵的地方:

  1. 要用 keyup event,這樣透過 val() 拿到的值才會是最新的
  2. 如果沒有使用 setTimeout,連續打字的時候就會拼命送 request 了 :p

其實很簡單吧 XD