基于jQuery的自动完成插件


Posted in Javascript onFebruary 03, 2011

下面是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 "\n\t"; 
echo '"'.$value['sno'].'"'; 
if( $key!=count($data)-1 ) echo ','; else echo "\n"; 
} 
echo "]\n"; 
?>
Javascript 相关文章推荐
js压缩利器
Feb 20 Javascript
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
js精度溢出解决方案
Dec 02 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 #Javascript
javascript event 事件解析
Jan 31 #Javascript
javascript getElementsByTagName
Jan 31 #Javascript
js对象数组按属性快速排序
Jan 31 #Javascript
javascript 节点排序 2
Jan 31 #Javascript
js自定义事件代码说明
Jan 31 #Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 #Javascript
You might like
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
php字符串操作常见问题小结
2016/10/11 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
详解Python中的文本处理
2015/04/11 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
Python序列类型的打包和解包实例
2019/12/21 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
为什么python比较流行
2020/06/19 Python
flask开启多线程的具体方法
2020/08/02 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
python实现计算器简易版
2020/12/17 Python
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
几个人围成一圈的问题
2013/09/26 面试题
高三上学期学习自我评价
2014/04/23 职场文书
幸福家庭标语
2014/06/27 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js