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

原文：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. }  
 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/onetwo/p/6277039.html