首先，用到的框架當(dāng)然是我的框架mass Framework，當(dāng)然你用其他框架也可以，如jQuery，沒有什么復(fù)雜的東西。只要弄懂原理，一下子就能搞出來。想必，以后你們工作也遇到做搜索框的活兒。
由于本人沒有后端，因此取用一個對象作為本地數(shù)據(jù)庫。而我現(xiàn)在要做的，其實遠(yuǎn)遠(yuǎn)比suggest高級，類似IDE的語法提示的東西。當(dāng)前成品已放到github上。
好了，我們動手吧。首先是結(jié)構(gòu)層，裝了FF的同學(xué)可以在百度首頁查看源碼，當(dāng)輸入幾個字母時，會動態(tài)生成了那些HTML。不過怎么也好，其成就是一個DIV放到搜索欄的下方，里面放了一個table，table動態(tài)存放候選詞。并且候選詞如果不是用戶輸入的部分，也就是說，JS自動補充的部分它會把它們放到一個b標(biāo)簽加粗顯示出來。不過， 我覺得用table太重量化，改用了ul列表，為了讓IE6也支持掠過變色效果，我還在里面套了一個a標(biāo)簽。為了放便取詞，我還為它(a標(biāo)簽)，添加了一個屬性，專門用于存放補充元整后的詞匯。大抵是這個樣子：
代碼如下:
用戶輸入部分
自動提示部分
用戶輸入部分
自動提示部分
看一看結(jié)構(gòu)，其實就是兩部分，div#search_wrapper為可見，div#suggest_wrapper為“不可見”（只要里面沒有l(wèi)i元素，它就不占空間，顯示不出來了）。input搜索框有個屬性autocomplete，用于關(guān)掉瀏覽器自帶的提示功能。關(guān)于data-value，這種命名方法是HTML5推薦的方式，用于定義要緩存的數(shù)據(jù)，data-*在新銳瀏覽器中會放到一個叫dataset的對象中。比如：
代碼如下:
data-drink="coffee"
data-meal-time="12:00">12:00
我們可以通過如下方式訪問到它：
代碼如下:
var el= document.getElementById('司徒正美');
alert( el.dataset.drink );
alert( el.dataset.mealTime );
當(dāng)然，你也可以不用設(shè)置屬性，直接取a標(biāo)簽的innerText或textContext。
注意：完整的詞匯 = 用戶輸入部分 + 自動提示部分。因此你不要在a標(biāo)簽里面加這么多東西，防止出現(xiàn)空格什么的，導(dǎo)致檢索失??！
接著是樣式部分，不過不詳述了。很簡單：
代碼如下:
#search_wrapper {
height:50px;
}
#search{
width:300px;
}
#suggest_wrapper{
position:relative;
}
#suggest_list{
position:absolute;
z-index:100;
list-style: none;
margin:0;
padding:0;
background:#fffafa;
border:1px solid #ccc;
border-bottom:0 none;
}
#suggest_list li a{
display: block;
height:20px;
width:304px;
color: #000;
border-bottom:1px solid #ccc;
line-height:20px;
text-decoration: none;
}
#suggest_list li a:hover, .glow_suggest {
background:#ffff80;
}
好了，到重點了。由于我沒有后臺，要使用一個本地對象作為本地數(shù)據(jù)庫。這對象當(dāng)然是個JS對象了。我們遍歷對象一般都是obj.aaa.bbb.ccc，這樣一直點下去，其實每到一個點號時，就是用for in 循環(huán)進行遍歷。因此我們監(jiān)聽文本內(nèi)容的輸入的情況，一但發(fā)生變化就取得輸入框的內(nèi)容，然后在for in 循環(huán)中比較。如果是與這個輸入值開頭的屬性就取出來，放到一個數(shù)組中，一直取夠十個，然后把這些數(shù)組的內(nèi)容拼接成上述描繪的li元素格式，一并貼到ul元素之內(nèi)。當(dāng)中，我們還要注意點中,如果一開始就輸入點號,我們就取window對象的十個屬性吧,以后遇到點號就切換這個對象。
好了,開始寫碼,由于用到我的框架,大家可以到這里去下。在項目首頁有README，教你是怎么安裝微型.Net服務(wù)器與查看文檔的。一開始，你就姑且把它當(dāng)成是添加了模塊加載功能的jQuery，API 90%神似。我們要用到它的事件模塊與屬性模塊，它會把相關(guān)依賴加載好的，再添加ready參數(shù)，它就會在domReady后執(zhí)行。我們選擇輸入框后為它綁定一個input事件，這是一個標(biāo)準(zhǔn)瀏覽器都支持的事件，IE下我的框架已經(jīng)兼容好了，用jQuery與原生的同學(xué)請用propertychange事件模擬。
代碼如下:
//by 司徒正美
$.require("ready,event,attr",function(){
var search = $("#search"), hash = window, prefix = "", fixIE = NaN;
search.addClass("search_target");
search.input(function(){//監(jiān)聽輸入
var
input = this.value,//原始值
val = input.slice( prefix.length),//比較值
output = []; //用來放置輸出內(nèi)容
if( fixIE === input){
return //IE下肅使是通過程序改變輸入框里面的值也會觸發(fā)propertychange事件，導(dǎo)致我們無法進行上下翻操作
}
for(var prop in hash){
if( prop.indexOf( val ) === 0 ){//取得以輸入值開頭的API
if( output.push( '
prop+'">'+ input + "" + (prefix + prop ).slice( input.length ) +"" ) == 10){
break;
}
}
}
//如果向前遇到點號,或向后取消點號
if( val.charAt(val.length - 1) === "." || (input && !val) ){
var arr = input.split("."); hash = window;
for(var j = 0; j < arr.length; j++){
var el = arr[j];
if(el && hash[ el ]){
hash = hash[ el ];//重新設(shè)置要遍歷API的對象
}
}
prefix = input == "." ? "" : input;
for( prop in hash){
if( output.push( '
prop+'">'+ input + "" + (prefix + prop ).slice( prefix.length ) +"" ) == 10){
break;
}
}
}
$("#suggest_list").html( output.join("") );
if(!input){//重置所有
hash = window;
fixIE = prefix = output = [];
}
});
});
當(dāng)提示列表出來后，我們就監(jiān)聽上下翻效果。也就是點擊鍵盤的方位鍵時，會上下高亮提示的條目，并且它填進搜索框中。這時需要綁定keyup事件，檢查其keyCode，標(biāo)準(zhǔn)瀏覽器管它為which，可以看我的這篇博文《javascript 鍵盤事件總結(jié)》。實現(xiàn)原理很簡單，定義一個外圍的變量，用于存放高亮的位置（索引值），然后用上翻時就減一，用下翻時就加一，然后取得提示列表中的所有a標(biāo)簽，用索引值定位到某一個a標(biāo)簽中，高亮它，然后去掉原先高亮的a標(biāo)簽。
代碼如下:
//by 司徒正美
$.require("ready,event,attr",function(){
var search = $("#search"), hash = window, prefix = "";
search.input(function(){//監(jiān)聽輸入
//.....
});
var glowIndex = -1;
$(document).keyup(function(e){//監(jiān)聽上下翻
if(/search_target/i.test( e.target.className)){//只代理特定元素,提高性能
var upOrdown = 0
if(e.which === 38 || e.which === 104){ //up 8
upOrdown --;
}else if(e.which === 40 || e.which === 98){//down 2
upOrdown ++;
}
if(upOrdown){
var list = $("#suggest_list a");
//轉(zhuǎn)移高亮的欄目
list.eq(glowIndex).removeClass("glow_suggest");
glowIndex += upOrdown;
var el = list.eq( glowIndex ).addClass("glow_suggest");
fixIE = el.attr("data-value")
search.val( fixIE )
if(glowIndex === list.length - 1){
glowIndex = -1;
}
}
}
});
});
最后是回車提交。我又寫到一個keyup事件中去。當(dāng)然你們可以設(shè)法把兩個keyup合成一個（監(jiān)聽window），我這樣寫純粹是為了教學(xué)的需要。
代碼如下:
//by 司徒正美
$.require("ready,event,attr",function(){
var search = $("#search"), hash = window, prefix = "";
search.input(function(){//監(jiān)聽輸入
//.....
});
var glowIndex = -1;
$(window).keyup(function(e){//監(jiān)聽上下翻
//.....
});
search.keyup(function(e){//監(jiān)聽提交
var input = this.value;
if(input && (e.which == 13 || e.which == 108)){ //如果按下ENTER鍵
alert(input)//實際項目中，應(yīng)該是進行頁面跳轉(zhuǎn)，跑到搜索結(jié)果頁中去的！
}
});
});
到此，suggest效果就完成了。如果下了我的框架的同學(xué)，開啟服務(wù)器，打開文檔首頁就能看到這個效果。而在實際項目，suggest其實更簡單些，就是當(dāng)輸入框文本變化時，AJAX請求后臺一個數(shù)組，然后再把它拼接成li元素的格式就行了。
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
