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控制表格隔行变色
Jun 26 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
小谈angular ng deploy的实现
Apr 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
php与php MySQL 之间的关系
2009/07/17 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
Python 创建子进程模块subprocess详解
2015/04/08 Python
python迭代dict的key和value的方法
2018/07/06 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
python中的unittest框架实例详解
2021/02/05 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
大三毕业自我鉴定
2014/01/15 职场文书
函授自我鉴定范文
2014/02/06 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript