|
|
1、可緩存查詢結(jié)果 （二次查詢速度快）
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ù)載越低，查詢速度越慢。
參數(shù)cache：是否實(shí)用緩存，默認(rèn)為true，例如當(dāng)搜索“test”時(shí)，程序會(huì)將對(duì)應(yīng)的查詢結(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);
代碼打包下載
JavaScript技術(shù)：jQuery Autocomplete自動(dòng)完成插件，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
