在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG

效果

下拉按钮素材:

js封装,注意红色部分为BUG修复,然后传入boxwidth不带px:

/*
/// <reference path="jquery-autocomplete2.0.js" />
zhangs
20140516
*/
(function($) {
var KEY = {
UP: 38,
DOWN: 40,
DEL: 46,
TAB: 9,
RETURN: 13, //回车
ESC: 27,
COMMA: 188,
SPACE: 32, //空格
PAGEUP: 33,
PAGEDOWN: 34,
BACKSPACE: 8
}; //默认属性
var defaults = {
hidvalueid: "combox_hid_value", //保存选中元素值的input的ID
boxwidth: 150, //文本框宽度,不带px,暂不支付百分比
url: "", //提交的页面/方法名,URL ="AsynHandler.ashx?ywtype=GetUserNameList"
param: null//要发送到服务端参数格式,主要是要动态取值的参数:[{ keyname: "catalog", keyvalue: "txtCata" }, { keyname: "cba", keyvalue: "txtCata2"},……]
};
    $.fn.combox = function(options) {
var options = $.extend(defaults, options); //将传入的参数进行合并
var hidvalue = $("#" + defaults.hidvalueid); //选中的值 //实现功能
return this.each(function() {
var cb = $(this); //输入框
cb.width(defaults.boxwidth - 15).css({ "cursor": "pointer", "float": "left" });
var id = cb.attr("id");
var searchresultdiv = $("<div id='" + id + "_searchresult' style='display: none;' />").insertAfter(cb);
searchresultdiv.addClass("searchresult").width(defaults.boxwidth);
//创建img
var img = $("<img id='" + id + "_img' style='cursor: pointer;float:left;'/>").insertAfter(cb);
img.attr("src", 'src/images/select_arrow.gif'); // 默认箭头
defaults.boxwidth = defaults.boxwidth + "px"; //重新设置为px
img.click(function() {
//显示所有项
cb.val(" ");
hidvalue.val("");
cb.keyup();
cb.focus();
}); //点击非弹出框区域隐藏弹出框
$(document).mousedown(function() {
if (searchresultdiv.css("display") == "block") {
var mx = event.clientX + $(document).scrollLeft(); //在iframe中滚动距离
var my = event.clientY + $(document).scrollTop(); //clientY相对文档的垂直座标 offsetY相对容器的垂直坐标
var x1 = searchresultdiv.offset().left;
var y1 = searchresultdiv.offset().top; // 元素相对于document的上位移
var x2 = x1 + searchresultdiv.outerWidth();
var y2 = y1 + searchresultdiv.outerHeight(); if (mx < x1 || my < y1 || x2 < mx || y2 < my) {
searchresultdiv.css("display", "none");
}
}
});
var strTmp = "";
if (defaults.url.indexOf("?") == -1) {
strTmp += "?";
} else {
strTmp += "&";
} cb.keyup(function(evt) {
changeCoords(); //控制查询结果div坐标
var k = window.event ? evt.keyCode : evt.which;
//输入框的id为txt_search,这里监听输入框的keyup事件
//不为空 && 不为上箭头或下箭头或回车
if (cb.val() != "" && k != KEY.UP && k != KEY.DOWN && k != KEY.RETURN) {
var strTmp2 = "";
//拼接传入的参数
if (defaults.param != null) {
$.each(defaults.param, function(i, item) {
if (typeof item.keyvalue != "string") {
alert("控件参数格式有错误,请检查");
return;
}
var value = $("#" + item.keyvalue).val();
if (value != "" || value != null) {
strTmp2 += item.keyname + "=" + escape(value) + "&";
}
}); } var sUrl = defaults.url + strTmp + strTmp2 + "key=" + escape(cb.val()) + "&rdnum=" + Math.random();
$.ajax({
type: 'GET',
async: false, //同步执行,不然会有问题
dataType: "json",
url: sUrl, //提交的页面/方法名
//data: , //参数(如果没有参数:null)
contentType: "application/json; charset=utf-8",
error: function(msg) {//请求失败处理函数
alert("数据加载失败");
},
success: function(data) { //请求成功后处理函数。
showlist(data);
}
});
}
else if (k == KEY.UP) {//上箭头
$('#' + id + '_combox_table tr.combox-hover').prev().addClass("combox-hover").width(defaults.boxwidth);
$('#' + id + '_combox_table tr.combox-hover').next().removeClass("combox-hover");
var tr_box_hover = $('#' + id + '_combox_table tr.combox-hover');
if (tr_box_hover.position() != undefined) {
if (tr_box_hover.position().top < 0) {
//向上滚动遮住的部分+本身的高度+padding高度
searchresultdiv.scrollTop(searchresultdiv.scrollTop() - (tr_box_hover.height() - tr_box_hover.position().top + 4));
}
cb.val($('#' + id + '_combox_table tr.combox-hover').text());
hidvalue.val($('#' + id + '_combox_table tr.combox-hover td').attr("value"));
}
} else if (k == KEY.DOWN) {//下箭头
if ($('#' + id + '_combox_table tr.combox-hover').size() == 0) {
$('#' + id + '_combox_table tr.combox-line:first').addClass("combox-hover").width(defaults.boxwidth); //若无选中的,则选中第一个
} else {
$('#' + id + '_combox_table tr.combox-hover').next().addClass("combox-hover").width(defaults.boxwidth);
$('#' + id + '_combox_table tr.combox-hover').prev().removeClass("combox-hover");
var tr_box_hover = $('#' + id + '_combox_table tr.combox-hover');
if (tr_box_hover.position().top + tr_box_hover.height() > searchresultdiv.height()) {
//向下滚动遮住的部分+本身高度+padding高度
searchresultdiv.scrollTop(searchresultdiv.scrollTop() + tr_box_hover.height() + (tr_box_hover.position().top + tr_box_hover.height()) - searchresultdiv.height() + 4);
}
}
cb.val($('#' + id + '_combox_table tr.combox-hover').text());
hidvalue.val($('#' + id + '_combox_table tr.combox-hover td').attr("value"));
}
else if (k == KEY.RETURN) {//回车
if ($('#' + id + '_combox_table tr.combox-hover').text() != "") {
cb.val($('#' + id + '_combox_table tr.combox-hover').text());
hidvalue.val($('#' + id + '_combox_table tr.combox-hover td').attr("value"));
}
searchresultdiv.empty();
searchresultdiv.css("display", "none");
}
else {
searchresultdiv.empty();
hidvalue.val(""); //清空数据后也要清空值
searchresultdiv.css("display", "none");
}
});
// searchresultdiv.bind("mouseleave", function() {
// searchresultdiv.empty();
// searchresultdiv.css("display", "none");
// }); //根据data生成下拉列表
function showlist(data) {
if (data == "false") {
return;
}
if (data.length > 0) {
var layer = "";
layer = "<table id='" + id + "_combox_table'>";
//layer += "<tr class='combox-line' style='width:" + defaults.boxwidth + "'><td style='width:" + defaults.boxwidth + "' value=''>请选择</td></tr>";
$.each(data, function(idx, item) {
layer += "<tr class='combox-line' style='width:" + defaults.boxwidth + "'><td style='width:" + defaults.boxwidth + "' value='" + item.Value + "'>" + item.Name + "</td></tr>";
});
layer += "</table>"; //将结果添加到div中
searchresultdiv.empty();
searchresultdiv.append(layer);
//$(".combox-line:first").addClass("combox-hover"); //初始化时不能显示,此时回车不会选中第一个
searchresultdiv.css("display", "");
//鼠标移动事件
$(".combox-line").hover(function() {
$(".combox-line").removeClass("combox-hover");
$(this).addClass("combox-hover").width(defaults.boxwidth);
}, function() {
$(this).removeClass("combox-hover");
//searchresultdiv.css("display", "none");
});
//鼠标点击事件
$(".combox-line").click(function() {
cb.val($(this).text());
hidvalue.val($(this).children()[0].value);
searchresultdiv.css("display", "none");
});
} else {
searchresultdiv.empty();
searchresultdiv.css("display", "none");
}
} //设置查询结果div坐标
function changeCoords() {
var left = cb.position().left; //获取距离最左端的距离,像素,整型
var top = cb.position().top + 20; ; //获取距离最顶端的距离,像素,整型(20为搜索输入框的高度)
searchresultdiv.css("left", left + "px"); //重新定义CSS属性
searchresultdiv.css("top", top + "px"); //同上
}
return cb;
}); };
})(jQuery);

前台注意boxwidth不带单位:

<link href="style/jquery-autocomplete2.0.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-autocomplete2.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { var strurl = "AsynHandler.ashx?ywtype=GetUserNameList";
$("#txt_search").combox({ hidvalueid: "hidselvalue",boxwidth:"150", url: strurl, param: [{ keyname: "catalog", keyvalue: "txtCata" }, { keyname: "cba", keyvalue: "txtCata1"}] });
$("#form1").keydown(function() {
//防止选中后回车提交表单
return (event.keyCode != 13);
});
});
</script>

后台不变

jQuery打造智能提示插件二(可编辑下拉框)的更多相关文章

  1. jQuery打造智能提示插件

    插件根据实际需要在单功能上封装的,实现传入后台数据地址,要保存值的input,前台要传入的参数(过滤条件),来返回下拉提示数据,数据过多可上下滚动选择,选择后显示文本与对应的值,供后台操作,如图: j ...

  2. jquery.editable-select 可编辑下拉框之获取select值和input值

    使用jquery.editable-select可以实现可编辑下拉框的功能,但需要先导入jquery.js,jquery.editable-select.css,jquery.editable-sel ...

  3. 使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换

    查看本章节 查看作业目录 需求说明: 使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换 实现思路: 在页面中添加 <select> 标签 ...

  4. bootstrap 的可编辑下拉框 jquery.editable-select

    搜了半天发现在某处下载jquery.editable-select需要积分,于是整理出来方便 其他人. 先上下载链接:http://pan.baidu.com/s/1kUXvwlL      pass ...

  5. bootstrap可编辑下拉框jquery.editable-select

    搜了半天发现在某处下载jquery.editable-select需要积分,于是整理出来方便 其他人. 先上下载链接: http://pan.baidu.com/s/1kUXvwlL      pas ...

  6. jQuery实用小技巧-获取选中的的下拉框和返回头部滑动动画

    //获取选中的下拉框 $('#someElement').find('option:selected'); $('#someElement option:selected'); //返回头部滑动动画 ...

  7. JQuery实现的 checkbox 全选;<select>下拉框功能

    1. 全选的checkbox选中时,子checkbox全部选中.反之,全部不选 2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中 3.子checkbox的数量和子check ...

  8. HTML可编辑下拉框

    <div style="position:relative;">   <select style="width:120px;" onchang ...

  9. jQuery无限级联下拉框插件

    自己编写jQuery插件 之 无限级联下拉框   因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉 ...

随机推荐

  1. 一台linux真实机实现多台Tomcat服务

    一.事前准备 ü 确保linux并未安装tomcat (这里虚拟机测试) ü 下载jdk与tomcat ① jdk-6u18-ea-bin-b01-linux-i586-20_aug_2009.bin ...

  2. 四则运算安卓客户端UI截图(部分)

    1.我们组安卓手机客户端UI设计主要由林培文同学负责,界面中用到的素材全部由他一人用PS制作,所以在素材来源上当属原创啦.正因为UI由一个人设计,同时他还得分担少量后台代码的编写,颇多的工作量与人才短 ...

  3. Kruskal 最小生成树算法

    对于一个给定的连通的无向图 G = (V, E),希望找到一个无回路的子集 T,T 是 E 的子集,它连接了所有的顶点,且其权值之和为最小. 因为 T 无回路且连接所有的顶点,所以它必然是一棵树,称为 ...

  4. 大话JS面向对象之开篇万物皆对象------(ATM取款机引发的深思)

    一,总体概要 OO(面向对象)概念的提出是软件开发工程发展的一次革命,多年来我们借助它使得很多大型应用程序得以顺利实现.如果您还没有掌握并使用OO进行程序设计和开发,那么您无疑还停留在软件开发的石器时 ...

  5. 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC

    系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)— ...

  6. ajax的使用:例题、ajax的数据处理

    需要注意的是,调用的封装的数据库,和jQuery的保存地址 一.注册 (1)写文本框来进行用户名的验证 <input type="text" id="uid&quo ...

  7. java笔记——Java关键字static、final使用小结

    static  1. static变量     按照是否静态的对类成员变量进行分类可分两种:一种是被static修饰的变量,叫静态变量或类变量:另一种是没有被static修饰的变量,叫实例变量.两者的 ...

  8. ASP.NET Core 1.1 静态文件、路由、自定义中间件、身份验证简介

    概述 之前写过一篇关于<ASP.NET Core 1.0 静态文件.路由.自定义中间件.身份验证简介>的文章,主要介绍了ASP.NET Core中StaticFile.Middleware ...

  9. TSql 巧用Alt 键

    1,查看表的信息 在TSql 编辑器中,选中一个表,如图 点击Alt+F1,就可以查看表的属性定义 2,使用alt批量插入逗号 在Tsql中使用 in 子句,在(value_List)列表中,经常有很 ...

  10. 异步方法不能使用ref和out的解决方法

    异常处理汇总-后端系列:http://www.cnblogs.com/dunitian/p/4523006.html 应用场景==>后端现在都是用异步方法,那么分页是必不可少的,于是就有了这个问 ...