下面是html测试代码：
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>autoComplete</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.autoComplete {margin:8px;position:relative;float:left;}
.autoComplete input{width:200px;height:25px;line-height:25px;margin:0;padding:0;}
.autoComplete ul{z-index:99;padding:0px;margin:0px;border:1px #333 solid;width:200px;background:white;display:none;position:absolute;left:0;top:28px;}
.autoComplete li{list-style:none;}
.autoComplete li a {display:block;color:#000;text-decoration:none;padding:1px 0 1px 5px;}
.autoComplete li a:hover {color:#000;background:#ccc;border:none;}
</style>
<script type="text/javascript" src="../javascript/lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../javascript/autoComplete.js"></script>
</head>
<body>
<div class="autoComplete"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete"> <input value="input" /> <ul><li></li></ul> </div>
<div class="autoComplete"> <input value="input" /> <ul><li></li></ul> </div>
</body>
</html>
下面是jQuery插件：
代码如下:
;(function($){
/* Plugin */
$.fn.autoComplete=function(o){
if(o.ajax) o.ajax=$.extend({ url:'', dataType:'json', async:true }, o.ajax||{});
o.elemCSS=$.extend({ focus:{'color':'#f00'}, blur:{'color':'#000'} }, o.elemCSS||{});
o=$.extend({
source:null,/* privide an array for match */
ajax:{},/* provide an ajax conditions, if source is exist this parameter is invalid */
input:'input',/* provide the selector of input box */
popup:'ul',/* provide the selector of popup box, it must be a ul element of html */
elemCSS:{}/* provide the focus and blur css objects of items in the popup box */
},o||{});
var handler=(function(){
var handler=function(e,o){ return new handler.prototype.init(e,o); };
handler.prototype={
e:null, o:null, timer:null, show:0, $input:null, $popup:null,
init:function(e,o){
this.e=e;
this.o=o;
this.$input=$(this.o.input,this.e);
this.$popup=$(this.o.popup,this.e);
this.initEvent();
},
match:function(quickExpr,value,source){
for(var i in source){
if( value.length>0 && quickExpr.exec(source[i])!=null )
this.$popup.append('<li><a href="javascript:;">'+source[i]+'</a></li>');
}
if($('li a',this.$popup[0]).length){ this.$popup.show(); }else{ this.$popup.hide(); }
