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 相关文章推荐
javascript包装对象实例分析
Mar 27 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 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 include任意文件或URL介绍
2014/04/29 PHP
常用PHP框架功能对照表
2014/10/23 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
Linux下为不同版本python安装第三方库
2016/08/31 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
Django后台admin的使用详解
2019/07/08 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
html5唤起app的方法
2017/11/30 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
竞选班长演讲稿
2013/12/30 职场文书
安全生产检查通报
2014/01/29 职场文书
五好党支部事迹材料
2014/02/06 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
丧事答谢词
2015/01/05 职场文书
整改通知书
2015/04/20 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
爱护公物主题班会
2015/08/17 职场文书
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers