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

效果如下：

?

JSP页面代码：

? ? 注意事项：

? ? ? ? ? ? ? ?依赖 jquery

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

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

?

/***
 * 自动检索下拉框
 */
.autoSelect {
	background: url("../images/select-icon.png") right no-repeat;
 }
input[type=text]::-ms-clear {display:none;}

.autoSelectDiv {
	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;
}

?

/***
 * 自动补全下拉框
 * 
 * 输入框设置：class="autoSelect"
 * 使用的时候 $("#tableID").autoSelect();
 * @param $
 */
(function($){
	$.fn.autoSelect = function(callback) {
		$(this).find(".autoSelect").each(function(i, v) {
			// 输入框
			var inputAuto = $(this);
			$(inputAuto).attr("autocomplete", "off");
			var codeName = $(inputAuto).attr("name");
			var textName = $(inputAuto).attr("textName");
			$(inputAuto).removeAttr("name");
			var inputHdCode = ‘<input type="hidden" class="hdCode" name="‘+codeName+‘" />‘;
			var inputHdName = ‘<input type="hidden" class="hdName" name="‘+textName+‘" />‘;
			var htmlDiv = ‘<div class="autoSelectDiv" isHover="false" ></div>‘;
			
			$(inputAuto).after(htmlDiv).after(inputHdName).after(inputHdCode);
			var isCalcLen = false; // 第一次点击的时候重新计算一下div的宽度，优化
			var isCalcLen1 = false; // 第一次点击的时候重新计算一下div的宽度，优化
			$(inputAuto).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).blur(function(){
				var isHover = $(divAuto).attr("isHover");
				if(isHover!="true") {
					$(divAuto).hide();
					if(callback && typeof(callback)=="function") {
						callback($(inputAuto));
					}
				}
			});
			$("body").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));
					}
				}
			});
			
		});
	}
})(jQuery);


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("");
				loadSelectOptions($(inputAutoObj).attr("url"), "", inputAutoObj, ifAll, false, "", callback);
			}
		});
	$("#"+contanerId + " .autoSelect").each(function(){
		var inputAuto = $(this);
		$(inputAuto).attr("placeholder","------- 请选择 ------");
		var filterText = $(inputAuto).val();
		var dftVal = $(inputAuto).attr("dftVal");
		var url = $(inputAuto).attr("url");
		
		if(dftVal) {
			loadSelectOptions(url, filterText, inputAuto, ifAll, true, dftVal, callback);
		} else {
			loadSelectOptions(url, filterText, inputAuto, ifAll, true, "", callback);
		}
		
		var origVal = "";
		$(inputAuto).focus(function() {
			origVal = $(this).val();
		});
		$(inputAuto).keyup(function(){
			if($(this).val() && $(this).val()==origVal) {
				return;
			}
			if(origVal==optionAllText) {
				origVal = "";
				$(this).val("");
			}
			$(this).parent().find("input[type=‘hidden‘].hdCode").val("");
			$(this).parent().find("input[type=‘hidden‘].hdName").val("");
			var text = $(this).val();
			loadSelectOptions(url, text, this, ifAll, false, "", callback);
		});
	});
}

/***
 * 加载下拉列表
 * @param url
 * @param filterText
 * @param inputAuto
 * @param ifAll 是否需要全选
 * @param isLoad 默认加载（true页面进来自动加载，false：输入检索自动补全时）
 * @param dftCode 默认值
 * @param callback 回调
 * @return
 */
function loadSelectOptions(url, filterText, inputAuto, ifAll, isLoad, dftCode, callback) {
	$.ajax({
		url: url,
		type:"post",
		data:{filterText:filterText},
		success:function(data){
			var divAuto = $(inputAuto).parent().find(".autoSelectDiv");
			if(data && data.length>0){
				var hdCode = $(inputAuto).parent().find("input[type=‘hidden‘].hdCode");
				var hdName = $(inputAuto).parent().find("input[type=‘hidden‘].hdName");
				var htmlUl = ‘<ul>‘;
				// 加载的时候， 有默认值就选择默认值， 没有就默认选择第一个
				if(dftCode) {
					if(ifAll===true && (filterText=="" || filterText==optionAllText)) {
						htmlUl += ‘<li code="">‘+optionAllText+‘</li>‘;
					}
					for(var i=0; i<data.length; i++) {
						var vCode = data[i]["code"];
						var vName = data[i]["name"];
						if(dftCode==vCode) {
							htmlUl += ‘<li code="‘+vCode+‘" class="active">‘+vName+‘</li>‘;
							$(inputAuto).val(vName);
							$(hdCode).val(vCode);
							$(hdName).val(vName);
						} else {
							htmlUl += ‘<li code="‘+vCode+‘">‘+vName+‘</li>‘;
						}
					}
				} else {
					if(ifAll===true && (filterText=="" || filterText==optionAllText)) {
						if(isLoad || $(inputAuto).val()==optionAllText) {
							htmlUl += ‘<li code="" class="active">‘+optionAllText+‘</li>‘;
						} else {
							htmlUl += ‘<li code="">‘+optionAllText+‘</li>‘;
						}
					}
					for(var i=0; i<data.length; i++) {
						var vCode = data[i]["code"];
						var vName = data[i]["name"];
						if(i==0) {
							// 如果是输入检索自动补全的时候， isLoad为false
							if(ifAll===true && isLoad) {
								$(inputAuto).val(optionAllText);
								htmlUl += ‘<li code="‘+vCode+‘">‘+vName+‘</li>‘;
//								$(hdCode).val("");
//								$(hdName).val("");
							} else if(isLoad) {
								htmlUl += ‘<li code="‘+vCode+‘" class="active">‘+vName+‘</li>‘;
								$(inputAuto).val(vName);
								$(hdCode).val(vCode);
								$(hdName).val(vName);
							} else {
								htmlUl += ‘<li code="‘+vCode+‘">‘+vName+‘</li>‘;
							}
						} else {
							htmlUl += ‘<li code="‘+vCode+‘">‘+vName+‘</li>‘;
						}
					}
				}
				htmlUl += ‘</ul>‘;

				$(divAuto).html(htmlUl);
				$(divAuto).find("ul li").unbind("click").click(function(){
					var code = $(this).attr("code");
					var name = $(this).html();

					var cnt = $(this).parent().parent().parent();
					$(cnt).find("input[type=‘hidden‘].hdCode").val("");
					$(cnt).find("input[type=‘hidden‘].hdName").val("");
					var ia = $(this).parent().parent().parent().find(".autoSelect");
					if(code=="" && name==optionAllText) {
						$(ia).val(optionAllText);
					}

					$(divAuto).hide();
					
					loadSelectOptions(url, "", $(ia), ifAll, false, code, callback);
				});
				
				// 回调函数
				if(callback && typeof(callback)=="function") {
					callback();
				}
			} else {
				$(divAuto).html(‘<ul><li class="text-center text-danger">无匹配项</li></ul>‘);
			}
		}
	});
}

?

?

?

?

?

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

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