功能优化，
1、增加级联查询功能（注：依赖Jquery.js，附有源代码，可以当作插件直接使用）
2、加入上下键选择功能，回车键选择结果。（2017-08-30）
级联查询下拉框组调用代码：
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
dftVal: 默认选中项的值
dftCon: 级联查询时的上级选中的值做为当前下拉框的固定搜索参数，
/***
* 自动检索下拉框
*/
.autoSelect {
background: url("../images/select-icon.png") right no-repeat;
}
input[type=text]::-ms-clear {display:none;}
.autoSelectDiv,.cascadeAutoSelectDiv {
background-color: #FFFFFF;
position: absolute;
display: none;
max-height: 283px;
overflow: auto;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
z-index: 100;
}
.autoSelectDiv ul {
list-style:none;
padding: 0px;
margin-bottom: 0px;
max-height: 283px;
}
.autoSelectDiv ul li {
border:1px solid #CCCCCC;
border-top:none;
padding:6px;
cursor:pointer;
height: 28px;
}
.autoSelectDiv ul:first-child {
border-top:1px solid #CCCCCC;
}
.autoSelectDiv ul li:hover {
background-color: #ddd;
}
.autoSelectDiv .active {
background-color: #3276b1;
color: #ffffff;
}
var UP_DOWN_KEY = {
KEY_UP:"UP",
KEY_DOWN:"DOWN"
};
/***
* 自动补全下拉框
* (下拉框插件核心方法)
* 输入框设置：class="autoSelect" 普通下拉框
* 输入框设置：class="cascadeAutoSelect" 级联下拉框
* 可以设置的一些自定义属性：
* name="" 选中后的值对应的字段
* textName="" 选中后的显示文本的内容对应的字段
* dftVal="" 默认选中的值
* dftCon="" 默认的检索条件，如级联选择的时候上级选中的值做为它的默认检索条件，输入检索之外的条件
* url="" 下拉框数据来源
* 使用的时候 $("#containerId").autoSelect(function() {});
* 使用的时候 $("#containerId").autoSelect(function() {});
* @param $
*/
(function($){
$.fn.autoSelect = function(callback) {
$(this).find(".autoSelect").each(function(i, v) {
initAutoSelect(this, callback);
});
},
$.fn.cascadeAutoSelect = function(callback) {
initAutoSelect(this, callback);
}
})(jQuery);
/***
* 初始化AutoSelect
* @param inputAuto
* @return
*/
function initAutoSelect(inputAuto, callback) {
// 输入框
$(inputAuto).attr("autocomplete", "off");
var codeName = $(inputAuto).attr("name");
var textName = $(inputAuto).attr("textName");
$(inputAuto).removeAttr("name");
var inputHdCode = '';
var inputHdName = '';
var htmlDiv = '';
if($(inputAuto).parent().find("div.autoSelectDiv").length==0) {
$(inputAuto).after(htmlDiv).after(inputHdName).after(inputHdCode);
} else {
$(inputAuto).parent().find("div.autoSelectDiv").removeAttr("style");
}
var isCalcLen = false; // 第一次点击的时候重新计算一下div的宽度，优化
var isCalcLen1 = false; // 第一次点击的时候重新计算一下div的宽度，优化
$(inputAuto).unbind("focus").focus(function(){
var divAT = $(this).parent().find(".autoSelectDiv");
var inputWidth = $(this).outerWidth();
var divWidth = $(divAT).outerWidth();
if(!isCalcLen && parseInt(divWidth) < parseInt(inputWidth)) {
isCalcLen = true;
$(divAT).css({width: parseInt(inputWidth)});
}
divWidth = $(divAT).outerWidth();
if(!isCalcLen1 && $(divAT).find("ul li").length>10) {
isCalcLen1 = true;
$(divAT).css({width: parseInt(divWidth) + 17});
}
$(divAT).show();
});
// 显示div
var divAuto = $(inputAuto).parent().find(".autoSelectDiv");
$(divAuto).unbind("hover")
.hover(
function() {
$(this).attr("isHover", "true");
}, function() {
$(this).attr("isHover", "false");
});
$(inputAuto).unbind("hover")
.hover(
function() {
$(this).attr("isHover", "true");
}, function() {
$(this).attr("isHover", "false");
});
$(inputAuto).unbind("blur").blur(function(){
var isHover = $(divAuto).attr("isHover");
if(isHover!="true") {
$(divAuto).hide();
if(callback && typeof(callback)=="function") {
callback($(inputAuto));
}
}
});
$("body").unbind("click").click(function(){
var isDivHover = $(divAuto).attr("isHover");
var isInputHover = $(inputAuto).attr("isHover");
if(isDivHover=="false" && isInputHover=="false") {
$(divAuto).hide();
if(callback && typeof(callback)=="function") {
callback($(inputAuto));
}
}
});
// 上下键、回车键事件
$(document).unbind("keydown").keydown(function(e) {
var keyCode = e.keyCode;
// PageUp
if(keyCode==38) {
upDownKey4Select(UP_DOWN_KEY.KEY_UP);
}
// PageDown
if(keyCode==40) {
upDownKey4Select(UP_DOWN_KEY.KEY_DOWN);
}
// Enter
if(keyCode==13) {
var currSelectDiv = $("div.autoSelectDiv:visible");
$(currSelectDiv).attr("keySelected", "true");
var objLi = $(currSelectDiv).find("ul > li.active");
if($(objLi).length>0) {
$(objLi).click();
$(currSelectDiv).prev().prev().prev().blur();
}
}
});
}
function upDownKey4Select(keyFlag) {
var currSelectDiv = $("div.autoSelectDiv:visible");
if($(currSelectDiv).length==0) return null;
$(currSelectDiv).prev().prev().prev().focus();
var top = $(currSelectDiv).offset().top;
var scrollTop = $(currSelectDiv).scrollTop();
var currLi = $(currSelectDiv).find("ul > li.active");
var objLi = null;
if($(currLi).length==0) {
objLi = $(currSelectDiv).find("ul > li:eq(0)");
$(objLi).addClass("active").scrollTop(0);
} else {
var liTop = $(currLi).offset().top;
if(UP_DOWN_KEY.KEY_UP==keyFlag) {
var tmpLiHeight = liTop-top;
if(tmpLiHeight>255) {
$(currSelectDiv).scrollTop(scrollTop+(tmpLiHeight-283));
} else if(tmpLiHeight<28) {
$(currSelectDiv).scrollTop(scrollTop-(28-tmpLiHeight));
}
} else if(UP_DOWN_KEY.KEY_DOWN==keyFlag) {
var tmpLiHeight = 255-(liTop-top);
if(tmpLiHeight>255) {
$(currSelectDiv).scrollTop(scrollTop-(tmpLiHeight-283));
} else if(tmpLiHeight<28) {
$(currSelectDiv).scrollTop(scrollTop+(28-tmpLiHeight));
}
}
if(UP_DOWN_KEY.KEY_UP==keyFlag) {
objLi = $(currLi).prev();
} else if(UP_DOWN_KEY.KEY_DOWN==keyFlag) {
objLi = $(currLi).next();
} else {
return null;
}
if($(objLi).length==0) return null;
$(objLi).addClass("active");
$(currLi).removeAttr("class");
}
return objLi;
}
var optionAllText = "------- 全部 -------";
/***
* 绑定自动补全下拉框
* @param contanerId 容器ID
* @param ifAll 是否需要全选
* @param callback 回调函数
* @return
*/
function bindAutoSelect(contanerId, ifAll, callback){
$("#"+contanerId).autoSelect(function(inputAutoObj){
// 如果没有选择，关闭选项div的时候清空输入框的内容
var hdCode = $(inputAutoObj).parent().find("input[type='hidden'].hdCode").val();
if(hdCode=="" && $(inputAutoObj).val()!=optionAllText) {
$(inputAutoObj).val("");
var dftCon = $(inputAutoObj).attr("dftCon");
loadSelectOptions($(inputAutoObj).attr("url"), "", inputAutoObj, ifAll, false, "", dftCon, "autoSelect", callback);
}
});
$("#"+contanerId + " .autoSelect").each(function(){
var inputAuto = $(this);
bindSelect(inputAuto, "autoSelect", ifAll, callback);
});
}
/***
* 绑定自动补全下拉框(可做级联)
* 给某个输入框绑定下拉功能
* @param selectId 元素ID
* @param ifAll 是否需要全选
* @param callback 回调函数
* @return
*/
function bindCascadeAutoSelect(selectId, ifAll, callback){
$("#"+selectId).cascadeAutoSelect(function(inputAutoObj){
// 如果没有选择，关闭选项div的时候清空输入框的内容
var hdCode = $(inputAutoObj).parent().find("input[type='hidden'].hdCode").val();
if(hdCode=="" && $(inputAutoObj).val()!=optionAllText) {
$(inputAutoObj).val("");
var dftCon = $(inputAutoObj).attr("dftCon");
loadSelectOptions($(inputAutoObj).attr("url"), "", inputAutoObj, ifAll, false, "", dftCon, "cascadeAutoSelect", callback);
}
});
var inputAuto = $("#"+selectId);
bindSelect(inputAuto, "cascadeAutoSelect", ifAll, callback);
}
/***
* 绑定初始下拉
* @param inputAuto
* @param selectClass过滤autoSelect的class属性值 （autoSelect、cascadeAutoSelect）
* @param ifAll
* @param callback
* @return
*/
function bindSelect(inputAuto, selectClass, ifAll, callback) {
$(inputAuto).attr("placeholder","------- 请选择 ------");
var filterText = "";
var dftVal = $(inputAuto).attr("dftVal"); // 默认选中值属性
var dftCon = $(inputAuto).attr("dftCon"); // 默认条件，如级联时上级选择的条件
var url = $(inputAuto).attr("url");
if(dftVal) {
loadSelectOptions(url, filterText, inputAuto, ifAll, true, dftVal, dftCon, selectClass, callback);
} else {
loadSelectOptions(url, filterText, inputAuto, ifAll, true, "", dftCon, selectClass, callback);
}
var origVal = "";
$(inputAuto).focus(function() {
origVal = $(this).val();
});
var origValKeyUp = "";
$(inputAuto).keyup(function(){
if($(this).val() && $(this).val()==origVal) {
return;
}
if(origVal==optionAllText) {
origVal = "";
$(this).val("");
}
var text = $(this).val();
if(origValKeyUp==text) {
return;
}
origValKeyUp = text;
$(this).parent().find("input[type='hidden'].hdCode").val("");
$(this).parent().find("input[type='hidden'].hdName").val("");
loadSelectOptions(url, text, this, ifAll, false, "", dftCon, selectClass, callback);
});
}
/***
* 加载下拉列表
* @param url
* @param filterText
* @param inputAuto
* @param ifAll 是否需要全选
* @param isLoad 默认加载（true页面进来自动加载，false：输入检索自动补全时）
* @param dftVal 默认选项值
* @param dftCon 默认条件，如级联下拉时上级选中的值
* @param selectClass过滤autoSelect的class属性值 （autoSelect、cascadeAutoSelect）
* @param callback 回调
* @return
*/
function loadSelectOptions(url, filterText, inputAuto, ifAll, isLoad, dftVal, dftCon, selectClass, callback) {
$.ajax({
url: url,
type:"post",
data:{filterText:filterText,dftCon:dftCon},
success:function(data){
var divAuto = $(inputAuto).parent().find(".autoSelectDiv");
if(data && data.length>0){
if(!(data instanceof Array)) {
$(divAuto).html('- 无法获取数据
- ';
// 加载的时候， 有默认值就选择默认值， 没有就默认选择第一个
if(dftVal) {
if(ifAll===true && (filterText=="" || filterText==optionAllText)) {
htmlUl += '
- '+optionAllText+' '; } for(var i=0; i
- '+vName+' '; } } } else { if(ifAll===true && (filterText=="" || filterText==optionAllText)) { if(isLoad || $(inputAuto).val()==optionAllText) { htmlUl += '
- '+optionAllText+' '; } else { htmlUl += '
- '+optionAllText+' '; } } for(var i=0; i
- '+vName+' '; $(inputAuto).val(vName); $(hdCode).val(vCode); $(hdName).val(vName); } else { htmlUl += '
- '+vName+' '; } } else { htmlUl += '
- '+vName+' '; } } } htmlUl += '
- 无匹配项
