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

最新推荐文章于 2023-11-20 16:36:53 发布
gqltt
最新推荐文章于 2023-11-20 16:36:53 发布
阅读量3.8k
点赞数
分类专栏： JavaScript
本文链接：https://blog.csdn.net/listeningsea/article/details/41008989
版权
JavaScript 专栏收录该内容
13 篇文章 0 订阅
订阅专栏
代码：
<%@ 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>