可搜索输入下拉框实现

最新推荐文章于 2023-10-31 22:10:07 发布

zxfjava2007

最新推荐文章于 2023-10-31 22:10:07 发布

阅读量157

点赞数

分类专栏： JavaScript 文章标签： HTML

本文链接：https://blog.csdn.net/zxfjava2007/article/details/83633322

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏


<%@ page contentType="text/html; charset=gb2312"%>
<HTML>
	<HEAD>
		<TITLE>可搜索输入下拉框实现</TITLE>
	</HEAD>
	<Script Language="JavaScript">
		<!--
		   var whichText;
		   function selectStation(obj) {
		   	   var objSelStation = obj;
		       if (obj.selectedIndex != -1) {
		           var stationName = obj.options[obj.selectedIndex].text;
		           whichText.value = stationName;
		       }
		       var stobj= document.getElementsByName('hospitalCode')[0];
		       //鼠标单击某一选项选定后关闭下拉框
		       showDivStation(this, false,'hospitalCode')
		    }

			//响应text的事件
		   	var pageD =0, pageU;
		   	function similarFind(txtObj,seledName) {
		        var curStationName = txtObj.value;
		        var objSelStation = document.getElementsByName(seledName)[0];
		        var stationLength = objSelStation.options.length;
		        var flag = true;
		   		pageU = pageD;
		        //从起始的文字匹配 用text中的数据跟下拉框中的数据
		        for (var i=0; i<stationLength; i++) {
		            var stationName = objSelStation.options[i].text;
		            var re = new RegExp("^" + curStationName);
		       		if (stationName.match(re)) {
		                if (i<stationLength - 10) {
		                    objSelStation.selectedIndex = i + 10;
		                }
		                objSelStation.selectedIndex = i;
		       			pageD = i;
		       			pageU = i;
		       			flag = false;
		                break;
		            }
		        }
		        从文字中匹配 用text中的数据跟下拉框中的数据
		        if(flag) {
		        	for (var i=0; i<stationLength; i++) {
			            var stationName = objSelStation.options[i].text;
			            var re2 = new RegExp("^.*" + curStationName+'.*$');
			       		if (stationName.match(re2)) {
			                if (i<stationLength - 10) {
			                    objSelStation.selectedIndex = i + 10;
			                }
			                objSelStation.selectedIndex = i;
			       			pageD = i;
			       			pageU = i;
			                break;
			            }
		        	}
		        }
				//响应下移键
			   	if(event.keyCode==40) {
			     	pageD++;
			     	if(pageD==objSelStation.options.length) pageD=0;
			     	txtObj.value=objSelStation.options[pageD].text ;
			     	objSelStation.selectedIndex = pageD;
			   	}
				//响应上移键
			   	if(event.keyCode==38) {
			     	--pageU;
			     	if(pageU<0) pageU=objSelStation.options.length-1;
			     	txtObj.value = objSelStation.options[pageU].text;
			     	objSelStation.selectedIndex = pageU;
			    }
			}
			//下拉框显示位置
		    function showDivStation(obj, b,selName) {
		        var divStation = document.getElementsByName(selName)[0]
		        if (b) {
		           whichText = obj;
		           divStation.style.display="block";
		           similarFind(obj,selName);
		        } else {
		           divStation.style.display="none";
		        }
		    }

		    function removeNull(node) {
		    	if(node.value=='--未选择--') 
		    	node.value = '';
		    }
		//-->
	</Script>
	<BODY bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
		<form name="caseLhBaseForm">
			<table>
				<tr>
					<td valign="top">医院</TD>
					<td>
						<input type="text" name="hospitalCodeName" 
							style="width: 330px"
							onfocus="showDivStation(this, true,'hospitalCode')" 
							onclick="removeNull(this)"
							onkeyup="similarFind(this,'hospitalCode')" 
							value="--未选择--">
						<select size="6" name="hospitalCode"
							style="display: none; width: 330px;"
							onclick="selectStation(this)">
							<option value="">--未选择--</option>
							<option value="340403007">北京上地医院</option>
							<option value="340402006">北京回龙观医院</option>
							<option value="340401005">北京中关村医院</option>
							<option value="340401005">上地第二医院</option>
							<option value="340403007">回龙观第二医院</option>
							<option value="340402006">朝阳医院</option>
							<option value="340401005">海淀医院</option>
							<option value="340401005">东城区医院</option>
						</select>
					</td>
				</tr>
			</table>
		</form>
	</BODY>
</HTML>