基于jQuery的自动完成插件

218 阅读 0 评论 144 点赞

我是靠谱客的博主野性小蘑菇，最近开发中收集的这篇文章主要介绍基于jQuery的自动完成插件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

下面是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(); } 
}, 
fetch:function(ajax,search,quickExpr){ 
var that=this; 
$.ajax({ 
url: ajax.url+search, 
dataType: ajax.dataType, 
async: ajax.async, 
error: function(data,es,et){ alert('error'); }, 
success: function(data){ that.match(quickExpr,search,data); } 
}); 
}, 
initEvent:function(){ 
var that=this; 
this.$input.focus(function(){ 
var value=this.value, quickExpr=RegExp('^'+value,'i'), self=this; 
that.timer=setInterval(function(){ 
if(value!=self.value){ 
value=self.value; 
that.$popup.html(''); 
if(value!=''){ 
quickExpr=RegExp('^'+value); 
if(that.o.source) that.match(quickExpr,value,that.o.source); 
else if(that.o.ajax) that.fetch(that.o.ajax,value,quickExpr); 
} 
} 
},200); 
}).blur(function(){ 
clearInterval(that.timer); 
var current=-1; 
var len=that.$popup.find("li a").length-1; 
$("li a",that.$popup[0]).click(function(){ 
that.$input[0].value=$(this).text(); 
that.$popup.html('').hide(); 
}).focus(function(){ 
current = $(this).parent().index(); 
$(this).css(that.o.elemCSS.focus); 
}).blur(function(){ 
$(this).css(that.o.elemCSS.blur); 
}); 
$("li a",that.$popup[0]).keydown(function(event){ 
if(event.keyCode==40){ 
current++; 
if(current<0) current=len; 
if(current>len) current=0; 
that.$popup.find("li a").get(current).focus(); 
}else if(event.keyCode==38){ 
current--; 
if(current>len) current=0; 
if(current<0) current=len; 
that.$popup.find("li a").get(current).focus(); 
} 
}); 
}).keydown(function(event){ 
if(event.keyCode==40){ 
that.$popup.blur().find("li a").get(0).focus(); 
} 
}); 
$(this.e).hover(function(){ that.show=1; },function(){ that.show=0; }); 
$(document).click(function(){ if(that.show==0){ that.$popup.hide(); } }); 
} 
}; 
handler.prototype.init.prototype=handler.prototype;/* JQuery style */ 
return handler; 
})(); 
return this.each(function(){ handler(this,o); }); 
}; 
/* Invoke */ 
$(document).ready(function(){ 
$(".autoComplete").autoComplete({ 
source:[123,1234,43563,12346,3464564,3454,7567,956,456,9383,893,999], 
//ajax:{ url:'./php/fetch.php?search=', dataType:'json', async:false }, 
elemCSS:{ focus:{'color':'#0f0'}, blur:{'color':'#f00'} } 
}); 
}); 
/* Conclude */ 
})(jQuery); 

调用时有个ajax请求被注释了，它返回一个json数据，我用php读数据库来测试的，如果需要，代码如下：

复制代码代码如下:

 
<?php 
class DataFetch{ 
private $conn, $rs; 
function __construct(){ 
$this->conn = mysql_connect("localhost","root","pwd") or die("Cant't connect host~"); 
mysql_select_db("studentinfo",$this->conn) or die("Cant't select database~"); 
} 
public function data_list($s){ 
$this->rs=mysql_query("select sno from student where sno like '$s%'") or die("Can't fetch~"); 
$dataList=array(); 
while($row = mysql_fetch_array($this->rs,MYSQL_ASSOC)){ 
array_push($dataList,$row); 
} 
return $dataList; 
} 
} 
$search= isset($argv[1]) ? $argv[1] : 
( isset($_GET['search']) ? $_GET['search'] : '' ) ; 
$fetch=new DataFetch(); 
$data=$fetch->data_list($search); 
echo '['; 
foreach ($data as $key=>$value){ 
echo "nt"; 
echo '"'.$value['sno'].'"'; 
if( $key!=count($data)-1 ) echo ','; else echo "n"; 
} 
echo "]n"; 
?> 