係Vista 或 Leopard 甚至Google Desktop, 有一個好方便的功能, 就是Search As You Type. 意思即是, 當你邊打字的時間, 會Search 到你要的東西. 現在, 就用JS 試試這類形的Search.
這篇教學的方法, 是低層次一點, 因為每次都會Search 一次, 而不是將Search 的範圍一直縮小, 教未能做到最佳的效能, 更好的版本會在稍後upload. 另外, 這篇教學為了方便, 便使用了JS prototype 的Library.
1. 要做Search, 我們先要一個Text field 的Element 比使用者Search 東西, 這個相信不會難到我們, 先做一個input 改名. 不過, 我們要加Javascript, 令使用者打字時便Search, 故set onkeyup(即是使用者按完鍵盤, 手指離開的那一下), 便call javascript, 現在我們找一個叫SearchUtility 的object, 入面的search method.
2. Search method 會傳入一個叫event 的東西, 這就是使用者觸發這個onkeyup 的event.
3. 在這個SearchUtility 的Object 入面, 我們準備了一條叫SearchArray 的array, 入面有要被Search 的資料.
4. search function 入面, 會從使用者中接收一個event .我們叫它做e.
5. 一進入去, 我將searchField 的字, 代入value 這個變數. 再準備一個boolean b, 來查一下有沒有找到要找的字. 另外, 有一個
keyCode, 是將使用者按的keycode儲下. 透過event 拿出keyCode, 再將使用者的keyCode 轉成整數, 存到keyCode 的變數之中.
6. 這個if, 保証了user 入的一定是a-z, 0-9
7. 之後用Regular Expression, 將value(text Field內的字), 變成RegularExpression Object, 再加入』i』, 即時ignore case 的意思.
8. 用for loop 一個一個將searchArray 內的 data 檢查, 被RegularExpression Object 查找, 如果找到 0 , 便是大小階不相符, 但是字母正確, 1便是大小階一樣相符, 完全一樣. 如果找到字母一樣, 便將boolean set 做true
9. 最後如果是true, 便alert 一句』ok』.
後話:
用RegularExpression 做search 是因為不想用 == , 要使用者完全正確才顯示. 當使用者打』a』的時侯, 如果用a==Apple, 是永遠false 的, 但是用RegularExpression 的方法便會成為true. 而且如果使用者打』pp』, 亦會是true 的.
HTML:
<input type=『text』 name=『searchField』 value=『』
id=『searchField』 onkeyup=『SearchUtility.search(event);』>
JS:
var SearchUtility = {
searchArray : new Array(『Apple』, 』Boy』, 』Car』, 』Dog』), //Search data array
search:function(e){
var value = $(『searchField』).value; //the search key
var b = false;
var keyCode = parseInt(e.keyCode); //user input keycode
if((keyCode >= 65 && 90 >= keyCode)|(keyCode >= 48 && 57 >= keyCode)){
//It will only contain a-z, 0-9
var RegularExpression = new RegExp(value,』i』);
//new a regular expression which is case insentive
for(i=0;i<searchutility.searcharray.length;i++){>-1){
//the key match the data
b = true;
}
}
if(b){ //that’s mean it can find the item
alert(『ok』);
}
}
}
}
