（急！在线等）诚心求教各位高手一个JS菜单的简单功能，高分送，分不够继续补。

假设有一个文本框 和一个下拉框<input name="searchkey" type="text"  ><select name="filename">
<option value="file">file</option>
<option value="name">name</option>
<option value="life">life</option>
</select>要实现的功能是：在文本框中键入选项的首字母，下拉框会自动跳转到对应的选项，
比如在文本框中键入n，或键入name ，下拉框会自动跳转到name的那个选项。
在文本框中键入l，下拉框会自动跳转到life的那个选项。下拉框里的内容可以是程序动态的生成的，比如
While not rs2.Eof
%><option value="<%=rs2("col")%>"><%=rs2("col")%></option> 
rs.movenext
wend应该怎么实现最好？
小弟水平有限，素闻csdn是各位JS大侠高人前辈出现的地方，故特来诚心求教各位，一旦解决问题，马上发分，绝不食言。 

解决方案 »

  1.   

    select 本来就自带这个功能...在获得焦点后...
      

  2.   

    因为选项里的内容是动态的 所以很难用固定的静态的方法对下拉框进行操作<script>
    function automenu(){ if (event.keycode ='n对应的asc码')document.attachment.filename.selectedIndex=2
    }
    </script><input name="searchkey" type="text"  onKeyPress="automenu()"><select name="filename">
    <option value="file">file </option>
    <option value="name">name </option>
    <option value="life">life </option>
    </select> 
      

  3.   

    这样的?
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head><body>
    <script type="text/javascript"> 
    function automenu(obj){ 
    var files = document.getElementById("filename").options;
    var val = obj.value.toLowerCase();
    if(val == "") return;

    for(var i=0; i<files.length; i++){
    if(files[i].value.substr(0, val.length).toLowerCase() == val){
    document.getElementById("filename").selectedIndex = i;
    break;
    }
    }
    } 
    </script> 
    <input name="searchkey" type="text" onpropertychange="automenu(this)"> 
    <select name="filename" id="filename"> 
        <option value="file">file </option> 
        <option value="name">name </option> 
        <option value="life">life </option> 
    </select> 
    </body>
    </html>
      

  4.   

    <input name="searchkey" type="text" onpropertychange="setchange(this);"> <select name="filename"> 
    <option value="file">file </option> 
    <option value="name">name </option> 
    <option value="life">life </option> 
    </select> 
    <script>
    function setchange(obj)
    {
          var objselect=document.getElementsByName("filename")[0];
          for(var i=0;i<objselect.options.length;i++)
          {
                if( objselect.options[i].value.toLowerCase() .indexOf(obj.value.toLowerCase())>=0)
                {
                        objselect.options[i].selected=true;
        objselect.focus();
                        break;
                }     
          }    }
    </script>
      

  5.   


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="Web.index" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            
            <input id="txtIndex" name="searchkey" type="text" onkeyup="changeItem(this.value,'selectFilename');" />         <select id="selectFilename" name="filename"> 
                <option value="file">file</option> 
                <option value="name">name</option> 
                <option value="life">life</option> 
            </select> 
            
            <script type="text/javascript">
                
                function changeItem(txt,select_id)
                {
                    var itemCount=document.getElementById(select_id).options.length;
                    for(i=0;i<itemCount;i++)
                    {
                        if(document.getElementById(select_id).options[i].text.indexOf(txt)==0)
                        {
                            document.getElementById(select_id).options[i].selected=true;
                            break;
                        }
                    }               
                
                }            
                
            </script>        
        </div>
        </form>
    </body>
    </html>