快捷導(dǎo)航

jQuery Autocomplete自動(dòng)完成插件

更新時(shí)間：2010年07月17日 20:21:00 作者：

jQuery Autocomplete plugin 寫(xiě)的比較滿(mǎn)意，拿出來(lái)分享，歡迎大家找BUG。

相對(duì)于同類(lèi)插件，他的特色有3點(diǎn)。
1、可緩存查詢(xún)結(jié)果（二次查詢(xún)速度快）
2、非keyup監(jiān)聽(tīng)方式（解決某些系統(tǒng)/情況下無(wú)法觸發(fā)keyxxx事件的問(wèn)題）
3、簡(jiǎn)潔的參數(shù) （好看？）

插件性能尚好，我的E6500、2G內(nèi)存，30秒內(nèi)一共發(fā)生了4469次調(diào)用，耗時(shí)94.65毫秒；百度的是2432次調(diào)用，80.24毫秒。

接近1倍的調(diào)用是jQuery中的問(wèn)題，但具體原因我還沒(méi)弄明白，如果那位兄弟知道的還請(qǐng)不吝賜教。

調(diào)用方法

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

 
jQuery("#kw").suggest({ 
url:siteConfig.suggestionUrl, 
params:{ 
kw:function(){return jQuery("#kw").val()}, 
n:10 
} 
}); 

參數(shù)url：baseUrl,例如http://www.target.com/search.php
參數(shù)params：url的后綴列表，范例中拼合的url為：http://www.target.com/search.php?kw=xxx&n=10&callback=?（默認(rèn)加入callback）
參數(shù)delay：輸入間隔時(shí)間，主要是為了降低負(fù)載，數(shù)值越大，負(fù)載越低，查詢(xún)速度越慢。
參數(shù)cache：是否實(shí)用緩存，默認(rèn)為true，例如當(dāng)搜索“test”時(shí)，程序會(huì)將對(duì)應(yīng)的查詢(xún)結(jié)果緩存，當(dāng)?shù)诙嗡阉鱰est時(shí)直接從緩存中讀取。
參數(shù)formId：必須填寫(xiě)，form表單的id
參數(shù)callback：是否使用jsonp以便處理跨域問(wèn)題。
核心代碼:
suggest.js

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

(function($){ 
$.tools = $.tools || {version: '1.0'}; 
$.tools.suggest = {}; 
$.tools.suggest.defaults = { 
url : null, 
params : null, 
delay : 100, 
cache : true, 
formId : '#search_form', 
focus:null, 
callback : true 
} 
$.tools.suggest.borderKey = { 
UP: 38, 
DOWN: 40, 
TAB: 9, 
ESC: 27, 
ENTER:13 
} 

$.fn.suggest=function(options,fn){ 
var options,key = $.tools.suggest.borderKey; 
if($.isFunction(options)){ 
fn=options; 
options = $.extend({}, $.tools.suggest.defaults, key); 
}else{ 
options = $.extend({}, $.tools.suggest.defaults, key, options); 
} 
return this.each(function(){ 
var 
self = $(this), 
url = options.url, 
params = options.params, 
searchUrl = null, 
searchtimer = 0, 
delay = options.delay, 
cache = options.cache, 
callback = options.callback, 
formobj = $(options.formId), 
focus = options.focus, 
rebox = $('<ul/>').attr("id","suggest"), 
htmlLi = null, 
litop = null, 
lileft = null, 
liwth = null, 
tip = false, 
val = null, 
rlen = null, 
UP = options.UP, 
DOWN = options.DOWN, 
TAB = options.TAB, 
ESC = options.ESC, 
ENTER = options.ENTER, 
index = -1, 
choseKey = null, 
backval = null, 
hidden = false, 
locksuggest = false 


//init 
if(focus){ 
self.focus(); 
searchtimer = setInterval(getKey, delay); 
} 
self.bind("focus",function(){ 
searchtimer = setInterval(getKey, delay); 
// 觸發(fā)焦點(diǎn)時(shí)初始化backval的值 
backval = (backval=$.trim(self.val()))==''?null:backval; 
}) 
.bind("blur",function(){ 
clearInterval(searchtimer); 
searchtimer = 0; 
hideResult(); 
}) 
.bind("keydown",function(e){ 
// 少于10項(xiàng)不使用switch 
if(e.keyCode == UP){ 
clearInterval(searchtimer); 
searchtimer = 0; 
if($('#suggest').css('display') == 'none'){ 
reSet(); 
return false; 
} 
index--; 
if(index<0){ 
index=Math.abs(rlen)-1; 
} 
changeSelect(index); 
e.preventDefault(); 
return false; 
}else if(e.keyCode == DOWN){ 
clearInterval(searchtimer); 
searchtimer = 0; 
if($('#suggest').css('display') == 'none'){ 
reSet(); 
return false; 
} 
index++; 
if(index>=rlen){ 
index=0; 
} 
changeSelect(index); 
e.preventDefault(); 
return false; 
}else if(e.keyCode == TAB){ 
clearInterval(searchtimer); 
searchtimer = 0; 
hideResult(); 
}else if(e.keyCode == ESC){ 
clearInterval(searchtimer); 
searchtimer = 0; 
hideResult(); 
return false; 
}else if(e.keyCode == ENTER){ 
clearInterval(searchtimer); 
searchtimer = 0; 
}else if(searchtimer == 0){ 
searchtimer = setInterval(getKey, delay); 
} 
}); 

// 獲取關(guān)鍵詞 
function getKey(){ 
val = $.trim(self.val()); 
// 關(guān)鍵詞不為空且關(guān)鍵詞不重復(fù) 
if(!!val && val!=backval){ 
backval = val; 
// 如不需要緩存結(jié)果，設(shè)cache為false 
if(cache && !!$.tools.suggest[val]){ 
index = -1; 
rlen = $.tools.suggest[val][1]; 
appendSuggest($.tools.suggest[val][0]); 
}else{ 
searchurl = url+'?'+$.param(params); 
getResult(searchurl,function(htmltemp,htmllen){ 
index = -1; 
rlen = htmllen; 
appendSuggest(htmltemp); 
}); 
} 
} 
// 關(guān)鍵詞為空 
if(!!!val && !hidden){ 
hideResult(); 
} 
} 

// 獲取提示數(shù)據(jù) 
function getResult(searchurl,fn){ 
if(callback){searchurl = searchurl+'&callback=?';} 
$.getJSON(searchurl,function(data){ 
var htmltemp = '', 
htmllen = 0, 
inputWord = self.val() 

$.each(data.list,function(i,n){ 
if(n.word != inputWord){ 
htmltemp += '<li>'+n.word+'</li>'; 
htmllen++; 
} 
}); 
if(cache && !!!$.tools.suggest[val]){$.tools.suggest[val]=[htmltemp,htmllen];} 
fn.call(document,htmltemp,htmllen) 
}); 
} 

// 插入提示數(shù)據(jù) 
function appendSuggest(result){ 
locksuggest = hidden = false; 
if(!!result){ 
if(!tip){ 
litop = self.offset().top+self.outerHeight()-1; 
lileft = self.offset().left; 
liwth = self.outerWidth()-2; 
rebox.css({'position':'absolute','top':litop,'left':lileft,'width':liwth}).html(result).appendTo('body').show(); 
tip = true; 
}else{ 
rebox.html(result).show(); 
} 
rebox.find('li').bind('mouseover',function(){ 
// 鎖定提示層，保證不因冒泡關(guān)閉提示層 
locksuggest = true; 
index = $(this).index(); 
changeSelect(index,false); 
}) 
.bind('click',function(){ 
changeSelect(index); 
searchSubmit(); 
}); 
rebox.bind('mouseout',function(){ 
locksuggest = false; 
}) 
}else{ 
// 如果檢索結(jié)果為空，清空提示層 
rebox.hide(); 
} 
} 

function changeSelect(index,v){ 
v=v==false?false:true; 
var obj = rebox.find('li').eq(index); 
rebox.find('li.mo').removeClass('mo'); 
obj.addClass("mo"); 
if(v){ 
choseKey = backval = obj.html(); 
self.val(choseKey); 
} 
} 

function reSet(){ 
if(!!self.val()){ 
index = -1; 
$('#suggest').css('display','block'); 
rebox.find('li.mo').removeClass('mo'); 
// 根據(jù)html結(jié)構(gòu)重新計(jì)算提示結(jié)果長(zhǎng)度 
rlen = rebox.find('li').size(); 
} 
} 

function hideResult(){ 
if(!locksuggest){ 
choseKey = backval = null; 
hidden = true; 
rebox.hide(); 
} 
} 

function searchSubmit(){ 
self.val(choseKey); 
hideResult(); 
clearInterval(searchtimer); 
formobj.submit(); 
} 

}); 
} 
})(jQuery);