可输入过滤和直接选择的select控件

代码：

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%><%@ include file="/common/taglibs.jsp"%><script language="javascript" type="text/javascript" src="<s:url value='/plugin/artDialog4.1.7/jquery.artDialog.source.js?skin=simple'/>"></script><script language="javascript" type="text/javascript" src="<s:url value='/plugin/artDialog4.1.7/plugins/iframeTools.source.js'/>"></script><style type="text/css">.selectTab{width: 726px;height: 43px;background-image: url("<c:url value='/images/teachManagement/selectBG_studentActivity.png'/>");background-repeat: no-repeat;display: block;}.font-12{font-family: '微软雅黑';font-size: 12px;font-weight: normal;font-style: normal;text-decoration: none;color: #333333;}table.selectTable tr td{padding: 4px 10px 4px 0px;}.classSelect{width: 120px;height: 22px;font-family: '微软雅黑';font-size: 13px;color: #000000;font-style: normal;font-weight: normal;text-decoration: none;}.errorPoint{width: 121px;height: 27px;cursor:pointer;}.rank{margin: 0px;padding: 0px;width: 240px;height: 500px;position: absolute;top: 40px;left: 745px;}.font-18{text-align: left;font-family: '微软雅黑';font-size: 18px;font-weight: normal;font-style: normal;text-decoration: none;color: #333333;}/**-----输入搜索下拉框-----**/.selectStyle{width: 188px;height: 22px;font-family: '微软雅黑';font-size: 12px;color: #000000;font-style: normal;font-weight: normal;text-decoration: none;}.selectContainer{position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);}.inputContainer{position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;}.filterOption{position:absolute;width:100%;min-height:150px;background-color: white;top: 22px;display:none;z-index: 3;}.line_option{background-color: white;}.line_option_select{background-color: grey;cursor:pointer;}/**-----输入搜索下拉框-----**/</style><script type="text/javascript" charset="UTF-8">function initFilterOption(){$("#filterOption>table").empty();var curName = $("#studentName").val();if( $.trim(curName) == "" ){$("#filterOption>table").empty();return;}$("#studentUserId_2>option").each(function(){var key = $(this).val();var value = $.trim($(this).text());if( value.indexOf(curName) ==0 ){$("#filterOption>table").append("<tr class='line_option'><td><span key='"+key+"'>" + value + "</span></td></tr>");}});}//通过键盘的up/down移动function moveOption( moveDown ){var selOption = $("#filterOption>table").find("tr.line_option_select");if( moveDown ){//没有选中的if( selOption.length ==0 ){$("#filterOption>table").find("tr").first().addClass("line_option_select");}//有选中的，且不是最后一个else if(selOption.next("tr").length != 0 ){selOption.removeClass("line_option_select");selOption.next("tr").addClass("line_option_select");}else{selOption.removeClass("line_option_select");$("#filterOption>table").find("tr").first().addClass("line_option_select");}}else{//没有选中的if( selOption.length ==0 ){$("#filterOption>table").find("tr").last().addClass("line_option_select");}//有选中的，且不是第一个else if(selOption.prev("tr").length != 0 ){selOption.removeClass("line_option_select");selOption.prev("tr").addClass("line_option_select");}else{selOption.removeClass("line_option_select");$("#filterOption>table").find("tr").last().addClass("line_option_select");}}}function selectOption(){var selOption = $("#filterOption>table").find("tr.line_option_select");if( selOption.length != 0 ){var key = selOption.find("span").attr("key");var value = $.trim(selOption.find("span").html());$("#studentName").val( value );$("#studentUserId_2 option[value='"+ key +"']").attr("selected", true);$("#filterOption").hide();var userId = $("#studentUserId_2").val();var dateTime = new Date().getTime();$("#activity_notification").load("<s:url value='/schoolclass/getClassMateActivityList.action?pageIndex='/>"+ "1&pageSize=5&isFirstQuery=true&queryTime="+ dateTime +"&id=" + userId );}}window.document.onkeydown = function keydownHandler(evt){evt = (evt) ? evt : window.event;if (evt.keyCode) {   if(evt.keyCode == 38){     moveOption(false);     return false;   }   else if(evt.keyCode == 40){   moveOption(true);   return false;   }   else if(evt.keyCode == 13 ){   selectOption();   }}};$().ready(function(){//学生下拉框改变$("#studentUserId_2").change(function(){var userId = $("#studentUserId_2").val();var userName = $.trim($("#studentUserId_2").find("option:selected").text());var dateTime = new Date().getTime();$("#activity_notification").load("<s:url value='/schoolclass/getClassMateActivityList.action?pageIndex='/>"+ "1&pageSize=5&isFirstQuery=true&queryTime="+ dateTime +"&id=" + userId );$("#studentName").val( userName );});$("#studentName").focus(function(){initFilterOption();$("#filterOption").show();});$(document).bind("mouseup",function(evt){var targetObj = $(evt.target);if( targetObj.is("input") && targetObj.attr("id") == "studentName" ) {//是学生输入框不做操作}else{$("#filterOption").hide();}});$("#studentName").bind("input propertychange",function(){initFilterOption();if( $("#filterOption").is(":hidden") ){$("#filterOption").show();}});//过滤后的学生姓名hover事件$("#filterOption").find("tr").die().live({mouseenter:function(){$(this).addClass("line_option_select");},mouseleave:function(){$(this).removeClass("line_option_select");},//过滤后的学生姓名选中事件click:function(){var key = $(this).find("span").attr("key");var value = $.trim($(this).find("span").html());$("#studentName").val( value );$("#studentUserId_2 option[value='"+ key +"']").attr("selected", true);$("#filterOption").hide();var userId = $("#studentUserId_2").val();var dateTime = new Date().getTime();$("#activity_notification").load("<s:url value='/schoolclass/getClassMateActivityList.action?pageIndex='/>"+ "1&pageSize=5&isFirstQuery=true&queryTime="+ dateTime +"&id=" + userId );}});//学习时长排行榜刷新Button$(".ranking_refresh_btn").click(function(){var schoolClassId = '${schoolClassId}';  $.ajax({  url: "<c:url value='/base/getStudyTimeList.action'/>",  type: "post",  async:true,  data:{schoolClassId:schoolClassId},  success: function( response ){  $(".studyTimeRank").empty();  $(".studyTimeRank").append(response);  },  error: function(reqObj, strError, strObj){alert("加载排行榜失败：" + strError);  }  });});$("#studentUserId_2").trigger("change");$(".ranking_refresh_btn").trigger("click");});</script><div id="main"><div id="left" style="width: 726px;"><div class="selectTab"><table class="selectTable" style="width: 300px;"><tr><td style="width: 1px;"></td><td style="width:60px;"><div style="position:relative;margin-top: 5px;"><span class="font-12">学生姓名：</span></div></td><td style="width:180px;"><div style="position:relative;height: 22px;margin-top: 5px;"><span class="selectContainer"><select id="studentUserId_2" name="studentUserId_2" class="selectStyle" style="margin-top: -1px;"><s:iterator value="studentList" var="optionPair" status="status"><s:if test="#optionPair.extend == 'selected'"><option selected="selected" value="<s:property value='#optionPair.key'/>"><s:property value='#optionPair.value'/></option></s:if><s:else><option value="<s:property value='#optionPair.key'/>"><s:property value='#optionPair.value'/></option></s:else></s:iterator></select></span><span class="inputContainer"><input type="text" name="studentName" id="studentName" value="" style="width:170px;height:15px;border:0pt;margin: 0px;"></span><div id="filterOption" class="filterOption"><table style="margin-bottom:0px;"></table></div></div></td></tr></table></div><div id="activity_notification"></div></div><div id="right" class="rank"><div style="margin-top: 5px;margin-bottom: 10px;"><span class="font-18" style="font-weight: bold;">本月班级学习时长排行榜</span><span class="ranking_refresh_btn" style="margin-left:10px;" title="点击，刷新排行榜"><img src="/images/new_exercise_refresh.png" style="width:22px;height:22px;"></span></div><div class="studyTimeRank"></div></div></div>