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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
js实现iframe动态调整高度的代码
Jan 06 Javascript
Document 对象的常用方法
Jul 31 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
简单了解JavaScript弹窗实现代码
May 07 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
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
JavaScript 参考教程
2006/12/29 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
python中Switch/Case实现的示例代码
2017/11/09 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
最新英语专业学生求职信范文
2013/09/21 职场文书
毕业生机械建模求职信
2013/10/14 职场文书
化妆品促销方案
2014/02/24 职场文书
新郎答谢词
2015/01/04 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL