基于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 相关文章推荐
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
JS实现分页导航效果
Feb 19 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
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 __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
Vue实现简单计算器案例
2020/02/25 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
关于python中remove的一些坑小结
2021/01/04 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
活动志愿者自荐信
2014/01/27 职场文书
安全责任书范文
2014/03/12 职场文书
文艺晚会策划方案
2014/06/11 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
班主任寄语2016
2015/12/04 职场文书