網路上找到的資料 找超久的
出自:http://www.cnblogs.com/lxJack/archive/2011/05/03/2035029.html
<%@ 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;
}
showDivStation(this, false,'selStation')//鼠标单击某一选项选定后关闭下拉框
}
//响应text的事件
var pageD =0, pageU;
function similarFind(txtObj,seledName) {
var curStationName = txtObj.value;
var objSelStation = eval("document.myform."+seledName);//根据实际的form name修改
var stationLength = objSelStation.options.length;
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;
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 = eval("document.myform."+selName);//根据实际的form name修改
if (b) {
whichText = obj;
divStation.style.top = 20;
divStation.style.left = 0;
divStation.style.display="block";
similarFind(obj,selName);
} else {
divStation.style.display="none";
}
}
//-->
</Script>
<BODY bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<form name="myform" >
<table border="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="6%" valign="top">城市</TD>
<td width="94%" bgcolor="#FFFFFF">
<!-- onfocus获取焦点时弹出下拉框 onkeyup按上下键时在下拉框中移动 -->
<input type="text" size="70" name="put" style="width:120" onfocus="showDivStation(this, true,'selStation')" onkeyup="similarFind(this,'selStation')" value="">
<!-- onclick鼠标点击时选择选项 -->
<select name="selStation" size="6" style="display:none;width:120;" onclick="selectStation(this)">
<option value="BJ" >北京</option>
<option value="SD" >山东</option>
<option value="SX" >山西</option>
<option value="HEB" >河北</option>
<option value="HEN" >河南</option>
<option value="HUB" >湖北</option>
<option value="HUN" >湖南</option>
<option value="GD" >广东</option>
<option value="GX" >广西</option>
</select>
</td>
</table>
</form>
</BODY>
</HTML>
留言列表
