下拉框js问题

想做一个和新浪相同的邮箱登录效果，比如我在输入框输入123则这个输入框下面出现半透明的下拉框里面显示[email protected],[email protected]，[email protected]等等

解决方案 »

  1.   

    <!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>
        <script language="javascript" type="text/javascript">
            //添加选项
            var Listobj=new Object();
             Listobj.add=function(oListbox,sName,sValue){
                var oOption=document.createElement("option");
                oOption.appendChild(document.createTextNode(sName));
                if(arguments.length==3){
                    oOption.setAttribute("value",sValue);
                }
                //添加选项
                oListbox.appendChild(oOption);
            }
            
            //移动选项
             Listobj.remove=function(oListbox,iIndex){
                oListbox.remove(iIndex);
            };
            
            //清空选项
            Listobj.clear=function (oListbox){
                for(var i=oListbox.options.length-1;i>=0;i--){
                    Listobj.remove(oListbox,i);//移动选项
                }
            };
            
            var Textobj=new Object();
            //创建与数组匹配的方法
             Textobj.autosuggestMatch=function(sText,arrValues){
                var arrResult=new Array;
                if(sText!=""){
                    for(var i=0;i<arrValues.length;i++){
                        if(arrValues[i].indexOf(sText)==0){
                            arrResult.push (arrValues[i]);//将颜数组色放入arrResule
                        }
                    }
                }
                return arrResult;
            };
            
            //实现搜索，并将结果数组添加到列表框中
             Textobj.autosuggest=function(oTextbox,arrValues,sListboxId){
                //获取列表索引;
                var oListbox=document.getElementById(sListboxId);
                //将匹配的样色放入文本框内
                var arrMatches=Textobj.autosuggestMatch(oTextbox.value,arrValues);
                //清空选项
                Listobj.clear(oListbox);//清空
                for(var i=0;i<arrMatches.length;i++){
                    Listobj.add(oListbox,arrMatches[i]);
                }
            };
            
            //创建匹配数组
            var arrColors=["测试","自动提示","沃尔沃","丰田","路虎","劳斯莱斯","悍马","大众","奇瑞QQ","吉利","玛莎拉蒂","夏利","捷达","宝马"];
            arrColors.sort();//对数组进行排序，默认按 升序排列
            
            
            //将列表框中的选项添加到文本框中
            function setText(oListbox,sTextboxId){
                var oTextbox=document.getElementById(sTextboxId);
                if(oListbox.selectedIndex>-1){
                    oTextbox.value=oListbox.options[oListbox.selectedIndex].text;
                }
            }
            
        </script>
    </head>
    <body>
        <p>输入汽车名字：<br />
        <input type="text" value="" id="txtColor" onkeyup="Textobj.autosuggest(this,arrColors,'lstColors')" /><br />
        <select id="lstColors" size="5" style="width:200px;" onclick="setText(this,'txtColor')"></select></p>
    </body>
    </html>