快捷導(dǎo)航

javascript suggest效果自動(dòng)完成實(shí)現(xiàn)代碼分享

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

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

首先，用到的框架當(dāng)然是我的框架mass Framework，當(dāng)然你用其他框架也可以，如jQuery，沒(méi)有什么復(fù)雜的東西。只要弄懂原理，一下子就能搞出來(lái)。想必，以后你們工作也遇到做搜索框的活兒。

由于本人沒(méi)有后端，因此取用一個(gè)對(duì)象作為本地?cái)?shù)據(jù)庫(kù)。而我現(xiàn)在要做的，其實(shí)遠(yuǎn)遠(yuǎn)比suggest高級(jí)，類似IDE的語(yǔ)法提示的東西。當(dāng)前成品已放到github上。

好了，我們動(dòng)手吧。首先是結(jié)構(gòu)層，裝了FF的同學(xué)可以在百度首頁(yè)查看源碼，當(dāng)輸入幾個(gè)字母時(shí)，會(huì)動(dòng)態(tài)生成了那些HTML。不過(guò)怎么也好，其成就是一個(gè)DIV放到搜索欄的下方，里面放了一個(gè)table，table動(dòng)態(tài)存放候選詞。并且候選詞如果不是用戶輸入的部分，也就是說(shuō)，JS自動(dòng)補(bǔ)充的部分它會(huì)把它們放到一個(gè)b標(biāo)簽加粗顯示出來(lái)。不過(guò)，我覺(jué)得用table太重量化，改用了ul列表，為了讓IE6也支持掠過(guò)變色效果，我還在里面套了一個(gè)a標(biāo)簽。為了放便取詞，我還為它(a標(biāo)簽)，添加了一個(gè)屬性，專門用于存放補(bǔ)充元整后的詞匯。大抵是這個(gè)樣子：

復(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>自動(dòng)提示部分</b> 
</a> 
</li> 
<li> 
<a data-value="完整的詞匯" href="javascript:void(0)"> 
用戶輸入部分 
<b>自動(dòng)提示部分</b> 
</a> 
</li> 
<!-- 更多l(xiāng)i 最多10個(gè) --> 
</ul> 
</div> 
</div> 

看一看結(jié)構(gòu)，其實(shí)就是兩部分，div#search_wrapper為可見(jiàn)，div#suggest_wrapper為“不可見(jiàn)”（只要里面沒(méi)有l(wèi)i元素，它就不占空間，顯示不出來(lái)了）。input搜索框有個(gè)屬性autocomplete，用于關(guān)掉瀏覽器自帶的提示功能。關(guān)于data-value，這種命名方法是HTML5推薦的方式，用于定義要緩存的數(shù)據(jù)，data-*在新銳瀏覽器中會(huì)放到一個(gè)叫dataset的對(duì)象中。比如：

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

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

我們可以通過(guò)如下方式訪問(wèn)到它：

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

 
var el= document.getElementById('司徒正美'); 
alert( el.dataset.drink ); 
alert( el.dataset.mealTime ); 

當(dāng)然，你也可以不用設(shè)置屬性，直接取a標(biāo)簽的innerText或textContext。
注意：完整的詞匯 = 用戶輸入部分 + 自動(dòng)提示部分。因此你不要在a標(biāo)簽里面加這么多東西，防止出現(xiàn)空格什么的，導(dǎo)致檢索失?。?
接著是樣式部分，不過(guò)不詳述了。很簡(jiǎn)單：

復(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; 
} 

好了，到重點(diǎn)了。由于我沒(méi)有后臺(tái)，要使用一個(gè)本地對(duì)象作為本地?cái)?shù)據(jù)庫(kù)。這對(duì)象當(dāng)然是個(gè)JS對(duì)象了。我們遍歷對(duì)象一般都是obj.aaa.bbb.ccc，這樣一直點(diǎn)下去，其實(shí)每到一個(gè)點(diǎn)號(hào)時(shí)，就是用for in 循環(huán)進(jìn)行遍歷。因此我們監(jiān)聽(tīng)文本內(nèi)容的輸入的情況，一但發(fā)生變化就取得輸入框的內(nèi)容，然后在for in 循環(huán)中比較。如果是與這個(gè)輸入值開(kāi)頭的屬性就取出來(lái)，放到一個(gè)數(shù)組中，一直取夠十個(gè)，然后把這些數(shù)組的內(nèi)容拼接成上述描繪的li元素格式，一并貼到ul元素之內(nèi)。當(dāng)中，我們還要注意點(diǎn)中,如果一開(kāi)始就輸入點(diǎn)號(hào),我們就取window對(duì)象的十個(gè)屬性吧,以后遇到點(diǎn)號(hào)就切換這個(gè)對(duì)象。
好了,開(kāi)始寫碼,由于用到我的框架,大家可以到這里去下。在項(xiàng)目首頁(yè)有README，教你是怎么安裝微型.Net服務(wù)器與查看文檔的。一開(kāi)始，你就姑且把它當(dāng)成是添加了模塊加載功能的jQuery，API 90%神似。我們要用到它的事件模塊與屬性模塊，它會(huì)把相關(guān)依賴加載好的，再添加ready參數(shù)，它就會(huì)在domReady后執(zhí)行。我們選擇輸入框后為它綁定一個(gè)input事件，這是一個(gè)標(biāo)準(zhǔn)瀏覽器都支持的事件，IE下我的框架已經(jīng)兼容好了，用jQuery與原生的同學(xué)請(qǐng)用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)聽(tīng)輸入 
var 
input = this.value,//原始值 
val = input.slice( prefix.length),//比較值 
output = []; //用來(lái)放置輸出內(nèi)容 
if( fixIE === input){ 
return //IE下肅使是通過(guò)程序改變輸入框里面的值也會(huì)觸發(fā)propertychange事件，導(dǎo)致我們無(wú)法進(jìn)行上下翻操作 
} 
for(var prop in hash){ 
if( prop.indexOf( val ) === 0 ){//取得以輸入值開(kāi)頭的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; 
} 
} 
} 
//如果向前遇到點(diǎn)號(hào),或向后取消點(diǎn)號(hào) 
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的對(duì)象 
} 
} 
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)提示列表出來(lái)后，我們就監(jiān)聽(tīng)上下翻效果。也就是點(diǎn)擊鍵盤的方位鍵時(shí)，會(huì)上下高亮提示的條目，并且它填進(jìn)搜索框中。這時(shí)需要綁定keyup事件，檢查其keyCode，標(biāo)準(zhǔn)瀏覽器管它為which，可以看我的這篇博文《javascript 鍵盤事件總結(jié)》。實(shí)現(xiàn)原理很簡(jiǎn)單，定義一個(gè)外圍的變量，用于存放高亮的位置（索引值），然后用上翻時(shí)就減一，用下翻時(shí)就加一，然后取得提示列表中的所有a標(biāo)簽，用索引值定位到某一個(gè)a標(biāo)簽中，高亮它，然后去掉原先高亮的a標(biāo)簽。

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

 
//by 司徒正美 
$.require("ready,event,attr",function(){ 
var search = $("#search"), hash = window, prefix = ""; 
search.input(function(){//監(jiān)聽(tīng)輸入 
//..... 
}); 
var glowIndex = -1; 
$(document).keyup(function(e){//監(jiān)聽(tīng)上下翻 
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; 
} 
} 
} 
}); 
}); 

最后是回車提交。我又寫到一個(gè)keyup事件中去。當(dāng)然你們可以設(shè)法把兩個(gè)keyup合成一個(gè)（監(jiān)聽(tīng)window），我這樣寫純粹是為了教學(xué)的需要。

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

 
//by 司徒正美 
$.require("ready,event,attr",function(){ 
var search = $("#search"), hash = window, prefix = ""; 
search.input(function(){//監(jiān)聽(tīng)輸入 
//..... 
}); 
var glowIndex = -1; 
$(window).keyup(function(e){//監(jiān)聽(tīng)上下翻 
//..... 
}); 
search.keyup(function(e){//監(jiān)聽(tīng)提交 
var input = this.value; 
if(input && (e.which == 13 || e.which == 108)){ //如果按下ENTER鍵 
alert(input)//實(shí)際項(xiàng)目中，應(yīng)該是進(jìn)行頁(yè)面跳轉(zhuǎn)，跑到搜索結(jié)果頁(yè)中去的！ 
} 
}); 
}); 

到此，suggest效果就完成了。如果下了我的框架的同學(xué)，開(kāi)啟服務(wù)器，打開(kāi)文檔首頁(yè)就能看到這個(gè)效果。而在實(shí)際項(xiàng)目，suggest其實(shí)更簡(jiǎn)單些，就是當(dāng)輸入框文本變化時(shí)，AJAX請(qǐng)求后臺(tái)一個(gè)數(shù)組，然后再把它拼接成li元素的格式就行了。

您可能感興趣的文章: