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 相关文章推荐
jQuery数组处理方法汇总
Jun 20 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 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
世界收音机发展史
2021/03/01 无线电
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
python 第三方库的安装及pip的使用详解
2017/05/11 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
python中xlrd模块的使用详解
2021/02/01 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
DTD的含义以及作用
2014/01/26 面试题
培训心得体会
2013/12/29 职场文书
实习单位接收函
2014/01/11 职场文书