文本框与下拉链表的组合

请问一下各位大神，在jsp页面的 一个表单中，有两个输入框，我想让两个输入框 都只需输入部分内容，下拉链表会出现相关具体内容。类似于火车票订票系统 输入站点时的提示 

解决方案 »

  1.   

    进去点击上面的Downloads下载方法代码，效果在文本框上随便输入点上面就看到了
      

  2.   

    <!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>带下拉列表的输入框 - 分享JavaScript-sharejs.com</title>
    </head>
    <body><br>
    <input onkeyup="showtips();if(event.keyCode==27)c();" id=txt onkeydown='enterTips()'>(例如： ShanDong)<br>
    <select id=sel style='display:none' onclick=rv() onkeydown='if(event.keyCode==13)rv()'></select>
    <script>
    var msg = new Array("Beijing","Tianjing","Shanghai","Guangdong","ShanDong","Shanxi","Hunan","Hubei");
    var msg2=new Array("北京","天津","上海","广东","山东","陕西","湖南","湖北");
     
    function showtips(){
    eo=event.srcElement;
    sel.length=0;
    var len=msg.length;
    var re=new RegExp("^"+eo.value,"i")
    var j=0
    for(i=0;i<len;i++) if(re.test(msg[i])==true){ sel.style.display='';sel.add(new Option(msg[i],msg2[i]));j++}
    sel.size = (j>1)?j:2;
    }
     
    function enterTips(){
    e=event.keyCode;
    if(sel.style.display!='none'){
    if(e==13) event.srcElement.value=sel.value,sel.style.display='none';
    if(e==40) sel.focus();
    }
    }
    function rv(){
    txt.value=sel.value;
    c()
    }
    function c(){
    sel.style.display='none';
    txt.focus()
    }
    document.onclick=function(){
    c()
    }
    </script>
     
     
    <br><br>
    <div align="center">
    获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a>
    </div>
    </body>
    </html>问一下 这个代码怎样更改可以在一个表单中 两个输入框的输入都能 自动提示，直接加语句的话 它的焦点始终不变。
      

  3.   

    <html>
    <head>
    <script type="text/javascript">
    function selectOne(myselectid,keywords)//参数myselectid是select的id，参数keywords输入的keyword
    {  
    keywords = keywords.replace(/ /g,""); //去掉空格
    var myselect = document.getElementById(myselectid); //得到select对象
    for(i=0;i<myselect.length;i++)// 循环option
    {
    if(myselect.options[i].text.indexOf(keywords)!=-1) //判断option的text是否包含keyword
    {
    myselect.options[i].selected=true;//选中
    break;
    }
    else
    {
    myselect.options[i].selected=false; //不包含keywords的取消选中
    }
    }
    }
    </script>
    </head>
    <body>
    <input id="input_text" type="text" onkeyup="selectOne('select_by_input',document.getElementById('input_text').value)"></input>
    <select id="select_by_input">
    <option>请选择......</option>
    <option>文本框与下拉列表的组合</option>
    <option>不包含keywords的取消选中</option>
    <option>Java编程思想第四版</option>
    <option>判断option的text是否包含keyword</option>
    <option>参数myselectid是select的id</option>
    <option>得到select对象</option>
    <option>去掉空格</option>
    <option>循环option</option>
    </select>
    </body>
    </html>
    不知你是否要这样的效果