jQuery打造智能提示插件二(可编辑下拉框)-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

jQuery打造智能提示插件二(可编辑下拉框)

简介:

在上一篇 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>
复制代码

后台不变

本文转自欢醉博客园博客,原文链接http://www.cnblogs.com/zhangs1986/p/3745303.html如需转载请自行联系原作者


欢醉

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章