$this.get(0).blur();
}
autoTip.hide();
index = -1;
} else if (kc == keys.ESC) {
autoTip.hide();
}
}
});
})(jQuery);
现在来分析上面的autocomplate插件的一些常用选项:
index就是选择提示选项高亮的索引;
timeId是当用户在文本域输入时,利用setTimeout进行ajax请求服务器获得数据的而返回的时间;
cssOptions是自动提示选项的样式,这里给出了一些默认的样式;
var defaults = {
width: “auto”,//默认或自动设置宽度
highlightColor: “#3399FE”,//高亮时的颜色
unhighlightColor: “#FFFFFF”,//非高亮时的颜色
css: cssOptions,
dataType: “xml”,//ajax请求返回数据类型
paramName: “word”,//ajax请求的参数名称,如果你有设置文本域的id,那么就使用这个属性
delay: 500,//当文本域在不停的输入时,ajax多久请求一次服务器
};
keys就是键盘键对应的值;
autocomplete就是调用的函数,可以在里面设置ajax请求的url,以及配置上面defaults中出现的参数,这个方法返回的是文本域的值;
autoTipTemplate就是输入时显示的提示框、提示菜单,返回的是一个jquery对象;
select是选择提示菜单也就是下来提示菜单的高亮选项,target当然是目标对象了,index是即将被高亮的选项的索引,settings就是
高亮的颜色配置,这个在默认defaults中就有的。是通过$.extend方法将defaults对象的属性赋值给settings对象的;
keyOperator是针对文本域的键盘操作,这个是核心函数;操作提示、自动补全就靠它了;
下面看看html代码,看看是如何调用autocomplate插件的:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Ajax示例,实现Google搜索补全功能</title>
<meta http-equiv=”author” content=”hoojo”>
<meta http-equiv=”email” content=”hoojo_@126.com”>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<script type=”text/javascript” src=”jslib/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”jslib/jquery.autocomplete-1.2.js”></script>
<script type=”text/javascript”>
$(function () {
$(“:text”).autocomplete(“AutocomplataWordServlet”, {dataType: “xml”, width: “auto”});
});
</script>
</head>
<body>
请输入:<input type=”text” />
<input type=”button” value=”Go” /><br/><br/>
</body>
</html>
看看这段代码AutocomplataWordServlet是请求的Servlet,dataType是ajax请求服务器端的返回数据的类型,width可以设置自动提示菜单的宽度。










