jQuery Autocomplete自动完成插件代码应用
以前我们开发像google自动完成功能都用到自定义开发的ajax现在有了jquery方便多了，他为我们提供了jquery autocomplete自动完成插件代码，下面我们来看看这款代码的实际应用吧。
参数url：baseurl,例如php教程">http://www.zzzyk.com/search.php
参数params：url的后缀列表，范例中拼合的url为：http://www.zzzyk.com/search.php?kw=xxx&n=10&callback=?（默认加入callback）
参数delay：输入间隔时间，主要是为了降低负载，数值越大，负载越低，查询速度越慢。
参数cache：是否实用缓存，默认为true，例如当搜索“test”时，程序会将对应的查询结果缓存，当第二次搜索test时直接从缓存中读取。
参数formid：必须填写，form表单的id
参数callback：是否使用网页特效onp以便处理跨域问题。
使用方法
jquery("#kw").suggest({
url:siteconfig.suggestionurl,
params:{
kw:function(){return jquery("#kw").val()},
n:10
}
});
suguust.网页特效
(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);
// 触发焦点时初始化backval的值
backval = (backval=$.trim(self.val()))==''?null:backval;
})
.bind("blur",function(){
clearinterval(searchtimer);
searchtimer = 0;
hideresult();
})
.bind("keydown",function(e){
// 少于10项不使用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);
}
});// 获取关键词
function getkey(){
val = $.trim(self.val());
// 关键词不为空且关键词不重复
if(!!val && val!=backval){
backval = val;
// 如不需要缓存结果，设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);
});
}
}
// 关键词为空
if(!!!val && !hidden){
hideresult();
}
}// 获取提示数据
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)
});
}// 插入提示数据
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('mouseo教程ver',function(){
// 锁定提示层，保证不因冒泡关闭提示层
locksuggest = true;
index = $(this).index();
changeselect(index,false);
})
.bind('click',function(){
changeselect(index);
searchsubmit();
});
rebox.bind('mouseout',function(){
locksuggest = false;
})
}else{
// 如果检索结果为空，清空提示层
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');
// 根据html结构重新计算提示结果长度
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);
补充：网页制作,jquery
