动态过滤填充input框和用弹出层替换select框
http://www.agoit.com/upload/attachment/65254/c90c3255-c405-3a9c-9db6-7317ce368855.jpg左图是用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");}
页:
[1]