jQuery 插件仿百度搜索框智能提示(带Value值)


Posted in Javascript onJanuary 22, 2013

因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个.
直接贴代码。

(function($) { 
var timeid; 
var lastValue; 
var options; 
var c; 
var d; 
var t; 
$.fn.autoComplete = function(config) { 
c = $(this); 
var defaults = { 
width: c.width(), //提示框的宽度 默认跟文本框一样 
maxheight: 150, //提示框的最大高度 
top: 6, //与文本框的上下距离 
url: "", //ajax 请求地址 
type: "post", //ajax 请求类型 
async: false, //是否异步请求 
autoLength: 0, //文本长度大于0 就请求服务器 
getValue: function(value){ }, //当回车 或 鼠标点击选中值的时候执行 
clearValue: function(){ }, //当重新请求时清空Value值 
getText: function(text){ } //当回车 或 鼠标点击选中值的时候执行 
}; 
options = $.extend(defaults, config); 
var p = c.position(); 
d = $('<div id="autoComplete_Group"></div>'); 
c.after(d); 
d.css({ "left": p.left, "top": p.top + c.height() + options.top, "width": options.width, "max-height": options.maxheight }); 
t = $('<table cellspacing="0" cellpadding="2"></table>'); 
d.append(t); 
d.append('<input style="display:none" />'); 
c.bind("keydown", keydown_process); 
c.bind("keyup", keyup_process); 
c.bind("blur", blur_process); 
d.bind("focus", focus_div); 
d.bind("mouseout", mouseout_div); 
} 
function blur_process() 
{ 
timeid = setTimeout(function(){ 
d.hide(); 
},200); 
} 
function mouseout_div() 
{ 
t.find(".nowRow").removeClass("nowRow"); 
} 
function focus_div() 
{ 
clearTimeout(timeid); 
c.focus(); 
} 
function keydown_process(e) 
{ 
if(d.is(":hidden")){ 
return; 
} 
switch(e.keyCode) 
{ 
case 38: 
e.preventDefault(); 
var p = t.find(".nowRow").prev(); 
if(p.length > 0){ 
d.setScroll(options.maxheight, p); 
p.mouseover(); 
}else{ 
p = t.find("tr:last"); 
if(p.length > 0){ 
d.setScroll(options.maxheight, p); 
p.mouseover(); 
} 
} 
break; 
case 40: 
e.preventDefault(); 
var n = t.find(".nowRow").next(); 
if(n.length > 0){ 
d.setScroll(options.maxheight, n); 
n.mouseover(); 
}else{ 
n = t.find("tr:first"); 
if(n.length > 0){ 
d.setScroll(options.maxheight, n); 
n.mouseover(); 
} 
} 
break; 
case 13: 
e.preventDefault(); 
var n = t.find(".nowRow"); 
if(n.length > 0){ 
options.getValue(n.find("input:hidden").val()); 
c.val(n.text()); 
options.getText(c.val()); 
lastValue = ""; 
d.hide(); 
} 
break; 
} 
} 
function keyup_process(e) 
{ 
if(e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13 || e.keyCode == 37 || e.keyCode == 39){ 
return; 
} 
if(c.val().length > options.autoLength){ 
if(c.val() == lastValue){ 
return; //判断是否跟上一次的值相等, 考虑到用户正在打字 避免相同的值多次请求 
} 
lastValue = c.val(); //记录请求值 
options.clearValue(); //清空值 
getData(c, function(data){ 
if(data.length == 0){ 
d.hide(); 
return; 
} 
t.find("tr").remove(); 
$.each(data, function(){ 
t.append('<tr><td>' + this.text + '<input type="hidden" value="' + this.value + '" /></td></tr>'); 
}); 
var rows = t.find("tr"); 
rows.mouseover(function(){ 
t.find(".nowRow").removeClass("nowRow"); 
$(this).addClass("nowRow"); 
}); 
rows.click(function(){ 
options.getValue($(this).find("input:hidden").val()); 
c.val($(this).text()); 
options.getText(c.val()); 
lastValue = ""; 
d.hide(); 
}); 
c.setPosition(); 
d.show(); 
}); 
}else{ 
lastValue = ""; 
d.hide(); 
} 
} 
function getData(o,process) 
{ 
$.ajax({ 
type: options.type, 
async: options.async, //控制同步 
url: options.url, 
data: o.attr("id") + "=" + o.val(), 
dataType: "json", 
cache: false, 
success: process, 
Error: function(err) { 
alert(err); 
} 
}); 
} 
$.fn.resetEvent = function() 
{ 
c.bind("keydown", keydown_process); 
c.bind("keyup", keyup_process); 
c.bind("blur", blur_process); 
d.bind("focus", focus_div); 
d.bind("mouseout", mouseout_div); 
} 
$.fn.setPosition = function() 
{ 
var p = c.position(); 
d.css({ "left": p.left, "top": p.top + c.height() + options.top }); 
} 
$.fn.setScroll = function(h, o) 
{ 
var offset = o.offset(); 
if(offset.top > h){ 
$(this).scrollTop(offset.top - h); 
}else{ 
if(offset.top < 25){ //项的高度 对应样式表 td height:25px 
$(this).scrollTop(0); 
} 
} 
} 
})(jQuery);

#autoComplete_Group { 
border: 1px solid #817F82; 
position: absolute; 
overflow-y:auto; 
overflow-x:hidden; 
display:none; 
} 
#autoComplete_Group table { 
background: none repeat scroll 0 0 #FFFFFF; 
cursor: default; 
width: 100%; 
} 
#autoComplete_Group td { 
color: #000000; 
font: 14px/25px arial; 
height: 25px; 
padding: 0 8px; 
} 
#autoComplete_Group .nowRow { 
background-color:#EBEBEB; 
}

<!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 runat="server"> 
<title>jQuery 仿百度提示框</title> 
<script src="/js/jquery.js" type="text/javascript"></script> 
<link href="/js/autoComplete/autoComplete.css" rel="stylesheet" type="text/css" /> 
<script src="/js/autoComplete/jquery.autoComplete.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 
$(document).ready(function(){ 
$("#txt_company").autoComplete({ url:"ajax.aspx" }); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<input id="txt_company" type="text" style="width:468px;" /> 
</form> 
</body> 
</html>

protected void Page_Load(object sender, EventArgs e) 
{ 
string keyword = Request["txt_company"]; 
string jsonArray = "[{\"text\":\"天天有限公司\",\"value\":\"2\"},{\"text\":\"明明有限公司\",\"value\":\"4\"},{\"text\":\"黄黄有限公司\",\"value\":\"4\"}]"; 
Response.Write(jsonArray); 
Response.End(); 
}

后台只需要返回json格式的 text 和 value值 就可以了。
$.fn.resetEvent(); 这个方法是重新绑定事件, 比如从一个容器 append到另一个容器 事件丢失了, append完可以使用该方法重新绑定事件。下面还有一些参数。
var defaults = { 
width: c.width(), //提示框的宽度 默认跟文本框一样 
maxheight: 150, //提示框的最大高度 
top: 6, //与文本框的上下距离 
url: "", //ajax 请求地址 
type: "post", //ajax 请求类型 
async: false, //是否异步请求 
autoLength: 0, //文本长度大于0 就请求服务器 
getValue: function(value){ }, //当回车 或 鼠标点击选中值的时候执行 
clearValue: function(){ }, //当重新请求时清空Value值 
getText: function(text){ } //当回车 或 鼠标点击选中值的时候执行 
};

好了。 唯一一个缺点就是 鼠标点击项的时候 不松开会隐藏掉下拉框,具体看我代码,有能力的可以改下~
Javascript 相关文章推荐
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 #Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 #Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 #Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 #Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 #Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 #Javascript
使用jquery实现图文切换效果另加特效
Jan 20 #Javascript
You might like
在线竞拍系统的PHP实现框架(一)
2006/10/09 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
Django用户身份验证完成示例代码
2020/04/03 Python
Python celery原理及运行流程解析
2020/06/13 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
超市端午节活动方案
2014/01/23 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
元旦晚会策划方案
2014/02/18 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
天堂的孩子观后感
2015/06/11 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书