动态过滤填充input框和用弹出层替换select框

左图是用keydown事件写的动态过滤填充input框

$(document).ready(function(){
	$("input.click").click(function(){$("ul").hide();});
	$("input.click").keydown(function(index){
		position(this);
		$("ul").show();
		$("ul li").each(function(){
			hoverEvent(this);
			$(this).click(function(){
				$("input.click").val("");
				textLi = $(this).text();
				$("ul").hide();
				$("input.click").val(textLi);
			});
		});
	});
});

 

右图是用弹出层替换select框

$(document).ready(function(){
	$("div.click").click(function(index){
		position(this);
		$("ul li:first").addClass("active");
		$("ul li").each(function(){
			if($("div.click span.text").text() == $(this).text()){
				$("ul li").removeClass("active");
				$(this).addClass("active");
			}
			hoverEvent(this);
			$(this).click(function(){
				$("div.click span.text").text("");
				textLi = $(this).text();
				$("ul").hide();
				$("div.click span.text").text(textLi);
			});
		});
	});
});

 

通用的方法

//弹出框定位
function position(obj){
	var leftMargin = $(obj).offset().left;
	var topMargin = $(obj).offset().top;
	leftMarginPX = leftMargin + "px";
	topMarginPX = (topMargin + 25) + "px";
	$("ul").css({left:leftMarginPX,top:topMarginPX});
}

//鼠标hover高亮
function hoverEvent(obj){
	$(obj).hover(
		function(){
			$(obj).addClass("active");
		},
		function(){
			$(obj).removeClass("active");
		}
	);
}

//上下键切换行
var currentLine = -1;
$(document).keydown(function(e){
	if(e.keyCode == 38){
		currentLine--;
		changeItem();	
	}
	else if(e.keyCode == 40){
		currentLine++;
		changeItem();	
	}
});
function changeItem(){
	$("ul li").removeClass("active");
	var lengthNum = $("ul").children("li").length;
	if(currentLine < 0){
		currentLine = lengthNum - 1; 
	}
	if(currentLine == lengthNum){
		currentLine = 0; 
	}
	$("ul li:nth-child("+(currentLine+1)+")").addClass("active");
}