更多功能自己添加
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<Script Language="JavaScript">
<!--
    function selectStation() {
        var objSelStation  = document.all.selStation;
        
        if (objSelStation.selectedIndex != -1) {
            var stationName = objSelStation.options[objSelStation.selectedIndex].text;
            whichText.value = stationName;
        }
    }
   var t=0,t1
    function similarFind(txtObj) {//匹配用text中的数据跟下拉框中的数据
        if(event.keyCode==40)
        {
         txtObj.value=document.SearchForm.selStation.options[t].text
         t++
         if(t==document.SearchForm.selStation.options.length) t=0
        }
        
        if(event.keyCode==38)
        {
         txtObj.value=document.SearchForm.selStation.options[t1].text
         t1--
         if(t1<0) t1=document.SearchForm.selStation.options.length-1
        }
    }
   
    function showDivStation(obj, b) {//下拉框显示位置
        var divStation = document.all.divSelStation;
        if (b) {
            whichText = obj;
            divStation.style.top = 20;
            divStation.style.left = 0;
            divStation.style.display="block";
            similarFind(obj);
        } else {
            divStation.style.display="none";
        }
    }    function clearSearchForm() {
        document.SearchForm.startStation.value = "";
        document.SearchForm.endStation.value = "";
    }

    var whichText;
//-->
</Script><BODY bgcolor="#FFFFFF" topmargin="0" leftmargin="0" onload="t1=document.SearchForm.selStation.options.length-1">
<form name="SearchForm" >
<input type="hidden" name="cityCode" value="0075">
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 width="100%" bgcolor="#FFFFFF" height="650" align="center">
  <TR> 
     <TD colspan="2" rowspan="2" valign="top" bgcolor="#FFFFFF" class="box"> 
      <input type="text" size="20" name="stationname" style="width:120" onfocus="showDivStation(this, true)" onblur="showDivStation(this, false)" onkeydown="similarFind(this)"> 
    </TD>
  </TR>
 
</TABLE>
<div id="divSelStation" style="position:absolute; width:120px; top:200px; left:60px; display:none; background-color:black">
    <table width="100%" valign="top" cellspacing="0" cellpadding="0" border="0">
        <tr align="center">
            <td><select name="selStation" size="10" style="width:120; top:200px; left:60px; background-color:#CCCC99" onclick="selectStation()" onkeyup="selectStation()">
<option value="1" >刘备</option>
<option value="2" >关羽</option>
<option value="3" >张飞</option>
<option value="4" >马超</option>
<option value="5" >黄忠</option>
<option value="6" >赵云</option>
<option value="7" >诸葛亮</option>
</select></td>
        </tr>
    </table>
</div>
</form>
</BODY>
</HTML>

解决方案 »

  1.   

    本人完善了可以上下移动的功能,各位继续呀!!!!
    <HTML>
    <HEAD>
    <TITLE></TITLE>
    </HEAD>
    <Script Language="JavaScript">
    <!--
        function selectStation() {
            var objSelStation  = document.all.selStation;
            
            if (objSelStation.selectedIndex != -1) {
                var stationName = objSelStation.options[objSelStation.selectedIndex].text;
                whichText.value = stationName;
            }
        }

    //响应text的事件
    var pageD =0, pageU;
        function similarFind(txtObj) {
            var curStationName = txtObj.value;
            var objSelStation  = document.all.selStation;
            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==document.browser.selStation.options.length) pageD=0;
    txtObj.value=document.browser.selStation.options[pageD].text ;
    objSelStation.selectedIndex = pageD;
            }
    //响应上移键
    if(event.keyCode==38) {
    --pageU;
    if(pageU<0) pageU=document.browser.selStation.options.length-1;
    objSelStation.selectedIndex = pageU;
    txtObj.value = document.browser.selStation.options[pageU].text;
            }
        }
       
        function showDivStation(obj, b) {//下拉框显示位置
            var divStation = document.all.divSelStation;
            if (b) {
                whichText = obj;
                divStation.style.top = 20;
                divStation.style.left = 0;
                divStation.style.display="block";
                similarFind(obj);
            } else {
                divStation.style.display="none";
            }
        }    function clearSearchForm() {
            document.browser.startStation.value = "";
            document.browser.endStation.value = "";
        }

        var whichText;
    //-->
    </Script><BODY bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
    <form name="browser" >
    <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 width="100%" bgcolor="#FFFFFF" height="650" align="center">
      <TR> 
         <TD colspan="2" rowspan="2" valign="top" bgcolor="#FFFFFF" class="box"> 
          <input type="text" size="20" name="stationname" style="width:120" onfocus="showDivStation(this, true)" onblur="showDivStation(this, false)" onkeyup="similarFind(this)"> 
        </TD>
      </TR>
     
    </TABLE>
    <div id="divSelStation" style="position:absolute; width:120px; top:200px; left:60px; display:none; background-color:black">
        <table width="100%" valign="top" cellspacing="0" cellpadding="0" border="0">
            <tr align="center">
                <td><select name="selStation" size="10" style="width:120; top:200px; left:60px; background-color:#CCCC99" onclick="selectStation()" onkeyup="selectStation()">
    <option value="1" >刘备</option>
    <option value="2" >关羽</option>
    <option value="3" >张飞</option>
    <option value="4" >马超</option>
    <option value="5" >黄忠</option>
    <option value="6" >赵云</option>
    <option value="7" >诸葛亮</option>
    </select></td>
            </tr>
        </table>
    </div>
    </form>
    </BODY>
    </HTML>
      

  2.   

    <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;
            }
        }

    //响应text的事件
    var pageD =0, pageU;
        function similarFind(txtObj,seledName) {
            var curStationName = txtObj.value;
            var objSelStation  = eval("document.browser."+seledName);
            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.browser."+selName);
            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="browser" >
    <table border="1" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
      
      <tr>
        <td width="50%"> </td>
        <td width="50%"> </td>
      </tr>
      <tr>
         <TD width=50% bgcolor="#FFFFFF"> 
    <input type="text" size="20" name="stationname" style="width:120" onfocus="showDivStation(this, true,'selStation')" onblur="showDivStation(this, false,'selStation')" onkeyup="similarFind(this,'selStation')" value="张飞"> 
    <select name="selStation" size="2" style="display:none;width:120; background-color:#CCCC99" onclick="selectStation(this)" onkeyup="selectStation(this)">
    <option value="1" >刘备</option>
    <option value="2" >关羽</option>
    <option value="3" >张飞</option>
    <option value="4" >马超</option>
    <option value="5" >黄忠</option>
    <option value="6" >赵云</option>
    <option value="7" >诸葛亮</option>
    </select>
    </td>
        <td width="50%"> </td>
      </tr>
    </table>
    </form>
    </BODY>
    </HTML>