快捷導(dǎo)航

javascript suggest效果自動完成實現(xiàn)代碼分享

更新時間：2012年02月17日 10:29:28 作者：

像百度與google，當(dāng)我們往搜索框輸入東西時就會出現(xiàn)一排列表提示用戶有什么熱門或適合的候選詞，這種效果就叫suggest。本文將一步步教你如何設(shè)計它

首先，用到的框架當(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ǔ)充的部分它會把它們放到一個b標(biāo)簽加粗顯示出來。不過，我覺得用table太重量化，改用了ul列表，為了讓IE6也支持掠過變色效果，我還在里面套了一個a標(biāo)簽。為了放便取詞，我還為它(a標(biāo)簽)，添加了一個屬性，專門用于存放補(bǔ)充元整后的詞匯。大抵是這個樣子：

復(fù)制代碼代碼如下:

 
<div id="search_wrapper"> 
<div> 
<input id="search" autocomplete="off"> 
</div> 
<div id="suggest_wrapper"> 
<ul id="suggest_list"> 
<li> 
<a data-value="完整的詞匯" href="javascript:void(0)"> 
用戶輸入部分 
<b>自動提示部分</b> 
</a> 
</li> 
<li> 
<a data-value="完整的詞匯" href="javascript:void(0)"> 
用戶輸入部分 
<b>自動提示部分</b> 
</a> 
</li> 
<!-- 更多l(xiāng)i 最多10個 --> 
</ul> 
</div> 
</div> 

看一看結(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的對象中。比如：

復(fù)制代碼代碼如下:

 
<div id="司徒正美" 
data-drink="coffee" 
data-meal-time="12:00">12:00</div> 

我們可以通過如下方式訪問到它：

復(fù)制代碼代碼如下:

 
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)致檢索失??！
接著是樣式部分，不過不詳述了。很簡單：

復(fù)制代碼代碼如下:

 
#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)進(jì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事件模擬。

復(fù)制代碼代碼如下:

 
//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)致我們無法進(jìn)行上下翻操作 
} 
for(var prop in hash){ 
if( prop.indexOf( val ) === 0 ){//取得以輸入值開頭的API 
if( output.push( '<li><a href="javascript:void(0)" data-value="'+prefix + 
prop+'">'+ input + "<b>" + (prefix + prop ).slice( input.length ) +"</b></a></li>" ) == 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( '<li><a href="javascript:void(0)" class="search_target" data-value="'+prefix + 
prop+'">'+ input + "<b>" + (prefix + prop ).slice( prefix.length ) +"</b></a></li>" ) == 10){ 
break; 
} 
} 
} 
$("#suggest_list").html( output.join("") ); 
if(!input){//重置所有 
hash = window; 
fixIE = prefix = output = []; 
} 
}); 
}); 

當(dāng)提示列表出來后，我們就監(jiān)聽上下翻效果。也就是點擊鍵盤的方位鍵時，會上下高亮提示的條目，并且它填進(jìn)搜索框中。這時需要綁定keyup事件，檢查其keyCode，標(biāo)準(zhǔn)瀏覽器管它為which，可以看我的這篇博文《javascript 鍵盤事件總結(jié)》。實現(xiàn)原理很簡單，定義一個外圍的變量，用于存放高亮的位置（索引值），然后用上翻時就減一，用下翻時就加一，然后取得提示列表中的所有a標(biāo)簽，用索引值定位到某一個a標(biāo)簽中，高亮它，然后去掉原先高亮的a標(biāo)簽。

復(fù)制代碼代碼如下:

 
//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é)的需要。

復(fù)制代碼代碼如下:

 
//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)該是進(jìn)行頁面跳轉(zhuǎn)，跑到搜索結(jié)果頁中去的！ 
} 
}); 
}); 