基于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下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
canvas实现图像截取功能
Feb 06 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
详解vue-cli3使用
Aug 14 Javascript
关于vue里页面的缓存详解
Nov 04 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 Static关键字实用方法
2010/06/04 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
javascript事件模型介绍
2016/05/31 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
js prototype和__proto__的关系是什么
2019/08/23 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
python 2.7.14安装图文教程
2018/04/08 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
关于Python解包知识点总结
2020/05/05 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
公关关系专员的自我评价分享
2013/11/20 职场文书
运动会入场词100字
2014/02/06 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
八一建军节慰问信
2015/02/14 职场文书
医院消毒隔离制度
2015/08/05 职场文书
idea下配置tomcat避坑详解
2022/04/12 Servers