基于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实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
简单实现js倒计时功能
Feb 13 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
AngularJS中ng-class用法实例分析
Jul 06 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
经典c++面试题六
2012/01/18 面试题
护士毕业生自荐信
2014/02/07 职场文书
事假请假条范文
2014/04/11 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
创业计划书之服装
2019/10/07 职场文书
python微信智能AI机器人实现多种支付方式
2022/04/12 Python