zoukankan      html  css  js  c++  java

  • 自动补全下拉框（可输入匹配的下拉框）

    原文：http://davidhhs.iteye.com/blog/2268888

    功能优化，增加级联查询功能（注：依赖Jquery.js，附有源代码，可以当作插件直接使用）

    级联查询下拉框组调用代码：  

    bindCascadeAutoSelect("selectId1", true, function(re1) {

    // re1 一级选项的值

    $("#selectId2).attr("dftCon", re1);

    bindCascadeAutoSelect("selectId2", true, function(re2) {

    // re2 二级选项的值

    $("#selectId3).attr("dftCon", re2);

    bindCascadeAutoSelect("selectId3", true, function(re3) {

    // re3 三级选项的值

    });

    });

    });

    普通查询下拉框调用代码：  

    bindAutoSelect("containerId", true, function() {});

     

    效果如下：

     

    JSP页面代码：

        注意事项：

                   依赖 jquery

                   name="supplierCode" textName="supplierName" , supplierCode会绑定到一个input[hidden] 上对应的是选项的值，supplierName对应的是选项显示的文本。

                   url: 对应的值是下拉列表数据来源。 返回类型是 List<xxDto> xxDto包含code, name 两个属性，具体格式可以根据自己的需求稍作修改

    dftVal: 默认选中项的值

    dftCon: 级联查询时的上级选中的值做为当前下拉框的固定搜索参数，

    Css代码  收藏代码
    1. /***  
    2.  * 自动检索下拉框  
    3.  */  
    4. .autoSelect {  
    5.     background: url("../images/select-icon.png") right no-repeat;  
    6.  }  
    7. input[type=text]::-ms-clear {display:none;}  
    8.   
    9. .autoSelectDiv,.cascadeAutoSelectDiv {  
    10.     #FFFFFF;  
    11.     position: absolute;  
    12.     display: none;  
    13.     max-height: 283px;  
    14.     overflow: auto;  
    15.     border-top: 1px solid #CCCCCC;  
    16.     border-bottom: 1px solid #CCCCCC;  
    17.     z-index: 100;  
    18. }  
    19. .autoSelectDiv ul {  
    20.     list-style:none;  
    21.     padding: 0px;  
    22.     margin-bottom: 0px;  
    23.     max-height: 283px;  
    24. }  
    25. .autoSelectDiv ul li {  
    26.     border:1px solid #CCCCCC;  
    27.     border-top:none;  
    28.     padding:6px;  
    29.     cursor:pointer;  
    30.     height: 28px;  
    31. }  
    32. .autoSelectDiv ul:first-child {  
    33.     border-top:1px solid #CCCCCC;  
    34. }  
    35. .autoSelectDiv ul li:hover {  
    36.     #ddd;  
    37. }  
    38. .autoSelectDiv .active {  
    39.     #3276b1;  
    40.     color: #ffffff;  
    41. }  
    Js代码  收藏代码
    1. /*** 
    2.  * 自动补全下拉框 
    3.  * (下拉框插件核心方法) 
    4.  * 输入框设置：class="autoSelect" 普通下拉框 
    5.  * 输入框设置：class="cascadeAutoSelect"      级联下拉框 
    6.  * 可以设置的一些自定义属性： 
    7.  *      name=""     选中后的值对应的字段 
    8.  *      textName="" 选中后的显示文本的内容对应的字段 
    9.  *      dftVal=""   默认选中的值 
    10.  *      dftCon=""   默认的检索条件，如级联选择的时候上级选中的值做为它的默认检索条件，输入检索之外的条件 
    11.  *      url=""      下拉框数据来源 
    12.  * 使用的时候 $("#containerId").autoSelect(function() {}); 
    13.  * 使用的时候 $("#containerId").autoSelect(function() {}); 
    14.  * @param $ 
    15.  */  
    16. (function($){  
    17.     $.fn.autoSelect = function(callback) {  
    18.         $(this).find(".autoSelect").each(function(i, v) {  
    19.             initAutoSelect(this, callback);  
    20.         });  
    21.     },  
    22.     $.fn.cascadeAutoSelect = function(callback) {  
    23.         initAutoSelect(this, callback);  
    24.     }  
    25. })(jQuery);  
    26.   
    27. /*** 
    28.  * 初始化AutoSelect 
    29.  * @param inputAuto 
    30.  * @return 
    31.  */  
    32. function initAutoSelect(inputAuto, callback) {  
    33.     // 输入框  
    34.     $(inputAuto).attr("autocomplete", "off");  
    35.     var codeName = $(inputAuto).attr("name");  
    36.     var textName = $(inputAuto).attr("textName");  
    37.     $(inputAuto).removeAttr("name");  
    38.     var inputHdCode = '<input type="hidden" class="hdCode" name="'+codeName+'" />';  
    39.     var inputHdName = '<input type="hidden" class="hdName" name="'+textName+'" />';  
    40.     var htmlDiv = '<div class="autoSelectDiv" isHover="false" ></div>';  
    41.     if($(inputAuto).parent().find("div.autoSelectDiv").length==0) {  
    42.         $(inputAuto).after(htmlDiv).after(inputHdName).after(inputHdCode);  
    43.     } else {  
    44.         $(inputAuto).parent().find("div.autoSelectDiv").removeAttr("style");  
    45.     }  
    46.     var isCalcLen = false; // 第一次点击的时候重新计算一下div的宽度，优化  
    47.     var isCalcLen1 = false; // 第一次点击的时候重新计算一下div的宽度，优化  
    48.     $(inputAuto).unbind("focus").focus(function(){  
    49.         var divAT = $(this).parent().find(".autoSelectDiv");  
    50.         var inputWidth = $(this).outerWidth();  
    51.         var divWidth = $(divAT).outerWidth();  
    52.         if(!isCalcLen && parseInt(divWidth) < parseInt(inputWidth)) {  
    53.             isCalcLen = true;  
    54.             $(divAT).css({ parseInt(inputWidth)});  
    55.         }  
    56.         divWidth = $(divAT).outerWidth();  
    57.         if(!isCalcLen1 && $(divAT).find("ul li").length>10) {  
    58.             isCalcLen1 = true;  
    59.             $(divAT).css({ parseInt(divWidth) + 17});  
    60.         }  
    61.         $(divAT).show();  
    62.     });  
    63.       
    64.     // 显示div  
    65.     var divAuto = $(inputAuto).parent().find(".autoSelectDiv");  
    66.       
    67.     $(divAuto).unbind("hover")  
    68.     .hover(  
    69.             function() {  
    70.                 $(this).attr("isHover", "true");  
    71.             }, function() {  
    72.                 $(this).attr("isHover", "false");  
    73.             });  
    74.     $(inputAuto).unbind("hover")  
    75.     .hover(  
    76.             function() {  
    77.                 $(this).attr("isHover", "true");  
    78.             }, function() {  
    79.                 $(this).attr("isHover", "false");  
    80.             });  
    81.     $(inputAuto).unbind("blur").blur(function(){  
    82.         var isHover = $(divAuto).attr("isHover");  
    83.         if(isHover!="true") {  
    84.             $(divAuto).hide();  
    85.             if(callback && typeof(callback)=="function") {  
    86.                 callback($(inputAuto));  
    87.             }  
    88.         }  
    89.     });  
    90.     $("body").unbind("click").click(function(){  
    91.         var isDivHover = $(divAuto).attr("isHover");  
    92.         var isInputHover = $(inputAuto).attr("isHover");  
    93.         if(isDivHover=="false" && isInputHover=="false") {  
    94.             $(divAuto).hide();  
    95.             if(callback && typeof(callback)=="function") {  
    96.                 callback($(inputAuto));  
    97.             }  
    98.         }  
    99.     });  
    100. }  
    Js代码  收藏代码
    1. var optionAllText = "------- 全部 -------";  
    2. /*** 
    3.  * 绑定自动补全下拉框 
    4.  * @param contanerId 容器ID 
    5.  * @param ifAll 是否需要全选 
    6.  * @param callback 回调函数 
    7.  * @return 
    8.  */  
    9. function bindAutoSelect(contanerId, ifAll, callback){  
    10.     $("#"+contanerId).autoSelect(function(inputAutoObj){  
    11.             // 如果没有选择，关闭选项div的时候清空输入框的内容  
    12.             var hdCode = $(inputAutoObj).parent().find("input[type='hidden'].hdCode").val();  
    13.             if(hdCode=="" && $(inputAutoObj).val()!=optionAllText) {  
    14.                 $(inputAutoObj).val("");  
    15.                 var dftCon = $(inputAutoObj).attr("dftCon");  
    16.                 loadSelectOptions($(inputAutoObj).attr("url"), "", inputAutoObj, ifAll, false, "", dftCon, "autoSelect", callback);  
    17.             }  
    18.         });  
    19.     $("#"+contanerId + " .autoSelect").each(function(){  
    20.         var inputAuto = $(this);  
    21.         bindSelect(inputAuto, "autoSelect", ifAll, callback);  
    22.     });  
    23. }  
    24.   
    25. /*** 
    26.  * 绑定自动补全下拉框(可做级联) 
    27.  * 给某个输入框绑定下拉功能 
    28.  * @param selectId 元素ID 
    29.  * @param ifAll 是否需要全选 
    30.  * @param callback 回调函数 
    31.  * @return 
    32.  */  
    33. function bindCascadeAutoSelect(selectId, ifAll, callback){  
    34.     $("#"+selectId).cascadeAutoSelect(function(inputAutoObj){  
    35.             // 如果没有选择，关闭选项div的时候清空输入框的内容  
    36.             var hdCode = $(inputAutoObj).parent().find("input[type='hidden'].hdCode").val();  
    37.             if(hdCode=="" && $(inputAutoObj).val()!=optionAllText) {  
    38.                 $(inputAutoObj).val("");  
    39.                 var dftCon = $(inputAutoObj).attr("dftCon");  
    40.                 loadSelectOptions($(inputAutoObj).attr("url"), "", inputAutoObj, ifAll, false, "", dftCon, "cascadeAutoSelect", callback);  
    41.             }  
    42.         });  
    43.     var inputAuto = $("#"+selectId);  
    44.     bindSelect(inputAuto, "cascadeAutoSelect", ifAll, callback);  
    45. }  
    46.   
    47. /*** 
    48.  * 绑定初始下拉 
    49.  * @param inputAuto 
    50.  * @param selectClass过滤autoSelect的class属性值 （autoSelect、cascadeAutoSelect） 
    51.  * @param ifAll 
    52.  * @param callback 
    53.  * @return 
    54.  */  
    55. function bindSelect(inputAuto, selectClass, ifAll, callback) {  
    56.     $(inputAuto).attr("placeholder","------- 请选择 ------");  
    57.     var filterText = "";  
    58.     var dftVal = $(inputAuto).attr("dftVal"); // 默认选中值属性  
    59.     var dftCon = $(inputAuto).attr("dftCon"); // 默认条件，如级联时上级选择的条件  
    60.     var url = $(inputAuto).attr("url");  
    61.       
    62.     if(dftVal) {  
    63.         loadSelectOptions(url, filterText, inputAuto, ifAll, true, dftVal, dftCon, selectClass, callback);  
    64.     } else {  
    65.         loadSelectOptions(url, filterText, inputAuto, ifAll, true, "", dftCon, selectClass, callback);  
    66.     }  
    67.       
    68.     var origVal = "";  
    69.     $(inputAuto).focus(function() {  
    70.         origVal = $(this).val();  
    71.     });  
    72.     var origValKeyUp = "";  
    73.     $(inputAuto).keyup(function(){  
    74.         if($(this).val() && $(this).val()==origVal) {  
    75.             return;  
    76.         }  
    77.         if(origVal==optionAllText) {  
    78.             origVal = "";  
    79.             $(this).val("");  
    80.         }  
    81.         var text = $(this).val();  
    82.         if(origValKeyUp==text) {  
    83.             return;  
    84.         }  
    85.         origValKeyUp = text;  
    86.         $(this).parent().find("input[type='hidden'].hdCode").val("");  
    87.         $(this).parent().find("input[type='hidden'].hdName").val("");  
    88.         loadSelectOptions(url, text, this, ifAll, false, "", dftCon, selectClass, callback);  
    89.     });  
    90. }  
    91.   
    92. /*** 
    93.  * 加载下拉列表 
    94.  * @param url 
    95.  * @param filterText 
    96.  * @param inputAuto 
    97.  * @param ifAll 是否需要全选 
    98.  * @param isLoad 默认加载（true页面进来自动加载，false：输入检索自动补全时） 
    99.  * @param dftVal 默认选项值 
    100.  * @param dftCon 默认条件，如级联下拉时上级选中的值 
    101.  * @param selectClass过滤autoSelect的class属性值 （autoSelect、cascadeAutoSelect） 
    102.  * @param callback 回调 
    103.  * @return 
    104.  */  
    105. function loadSelectOptions(url, filterText, inputAuto, ifAll, isLoad, dftVal, dftCon, selectClass, callback) {  
    106.     $.ajax({  
    107.         url: url,  
    108.         type:"post",  
    109.         data:{filterText:filterText,dftCon:dftCon},  
    110.         success:function(data){  
    111.             var divAuto = $(inputAuto).parent().find(".autoSelectDiv");  
    112.             if(data && data.length>0){  
    113.                 if(!(data instanceof Array)) {  
    114.                     $(divAuto).html('<ul><li class="text-center text-danger">无法获取数据</li></ul>');  
    115.                     return;  
    116.                 }  
    117.                 var hdCode = $(inputAuto).parent().find("input[type='hidden'].hdCode");  
    118.                 var hdName = $(inputAuto).parent().find("input[type='hidden'].hdName");  
    119.                 var htmlUl = '<ul>';  
    120.                 // 加载的时候， 有默认值就选择默认值， 没有就默认选择第一个  
    121.                 if(dftVal) {  
    122.                     if(ifAll===true && (filterText=="" || filterText==optionAllText)) {  
    123.                         htmlUl += '<li code="">'+optionAllText+'</li>';  
    124.                     }  
    125.                     for(var i=0; i<data.length; i++) {  
    126.                         var vCode = data[i]["code"];  
    127.                         var vName = data[i]["name"];  
    128.                         if(dftVal==vCode) {  
    129.                             htmlUl += '<li code="'+vCode+'" class="active">'+vName+'</li>';  
    130.                             $(inputAuto).val(vName);  
    131.                             $(hdCode).val(vCode);  
    132.                             $(hdName).val(vName);  
    133.                         } else {  
    134.                             htmlUl += '<li code="'+vCode+'">'+vName+'</li>';  
    135.                         }  
    136.                     }  
    137.                 } else {  
    138.                     if(ifAll===true && (filterText=="" || filterText==optionAllText)) {  
    139.                         if(isLoad || $(inputAuto).val()==optionAllText) {  
    140.                             htmlUl += '<li code="" class="active">'+optionAllText+'</li>';  
    141.                         } else {  
    142.                             htmlUl += '<li code="">'+optionAllText+'</li>';  
    143.                         }  
    144.                     }  
    145.                     for(var i=0; i<data.length; i++) {  
    146.                         var vCode = data[i]["code"];  
    147.                         var vName = data[i]["name"];  
    148.                         if(i==0) {  
    149.                             // 如果是输入检索自动补全的时候， isLoad为false  
    150.                             if(ifAll===true && isLoad) {  
    151.                                 $(inputAuto).val(optionAllText);  
    152.                                 htmlUl += '<li code="'+vCode+'">'+vName+'</li>';  
    153. //                              $(hdCode).val("");  
    154. //                              $(hdName).val("");  
    155.                             } else if(isLoad) {  
    156.                                 htmlUl += '<li code="'+vCode+'" class="active">'+vName+'</li>';  
    157.                                 $(inputAuto).val(vName);  
    158.                                 $(hdCode).val(vCode);  
    159.                                 $(hdName).val(vName);  
    160.                             } else {  
    161.                                 htmlUl += '<li code="'+vCode+'">'+vName+'</li>';  
    162.                             }  
    163.                         } else {  
    164.                             htmlUl += '<li code="'+vCode+'">'+vName+'</li>';  
    165.                         }  
    166.                     }  
    167.                 }  
    168.                 htmlUl += '</ul>';  
    169.   
    170.                 $(divAuto).html(htmlUl);  
    171.                 $(divAuto).find("ul li").unbind("click").click(function(){  
    172.                     var code = $(this).attr("code");  
    173.                     var name = $(this).html();  
    174.   
    175.                     var cnt = $(this).parent().parent().parent();  
    176.                     $(cnt).find("input[type='hidden'].hdCode").val("");  
    177.                     $(cnt).find("input[type='hidden'].hdName").val("");  
    178.                     var ia = $(this).parent().parent().parent().find("." + selectClass);  
    179.                     if(code=="" && name==optionAllText) {  
    180.                         $(ia).val(optionAllText);  
    181.                     }  
    182.   
    183.                     $(divAuto).hide();  
    184.                       
    185.                     loadSelectOptions(url, "", $(ia), ifAll, false, code, dftCon, selectClass, callback);  
    186.                 });  
    187.                   
    188.                 // 回调函数  
    189.                 if(callback && typeof(callback)=="function") {  
    190.                     callback($(inputAuto).next("input[type='hidden'].hdCode").val());  
    191.                 }  
    192.             } else {  
    193.                 $(divAuto).html('<ul><li class="text-center text-danger">无匹配项</li></ul>');  
    194.             }  
    195.         }  
    196.     });  
    197. }  
     
  • 相关阅读:
    CentOS7 下部署 Iptables 环境纪录（关闭默认的firewalle）
    Linux系统下root密码遗忘等系统故障的修复方法
    LDAP学习笔记总结
    kvm虚拟化关闭虚拟网卡virbr0的方法
    Gradle使用指南
    Android 注解工具 ButterKnife
    Sublime Text + CTags + Cscope (部分替代Source Insight)
    win + linux + android 多任务分屏
    Ubuntu16.04 安装openjdk-7-jdk
    eclipse + Android Studio 集成 Genymotion 模拟器
  • 原文地址：https://www.cnblogs.com/onetwo/p/6277039.html
Copyright © 2011-2022 走看看