js实现的邮箱自动补全

今天练习了一个邮箱自动补全的内容，在前端输入邮箱的时候系统可以自动补全，这个技能点比较简单，现在写一下我自己的做法：
这里需要注意两个点：
１、前面用户自己输入，后面@之后的内容自动补全
２、当用户输入@时，可以自动为用户匹配相应的邮箱后缀
３、用户可以通过点击已匹配好的邮箱输入到框中

ＨＴＭＬ５代码（页面部分）：

<input id="regemail" class="int-type w-thir" type="text" autocomplete="off" tips="邮箱地址" name="email" rule="" style="ime-mode: disabled;">
<div id="maillist" style="display: none;">
  <h3>请选择邮箱类型h3>
  <ul>
    <li class="on">li>
    <li>@qq.comli>
    <li>@163.comli>
    <li>@126.comli>
    <li>@sina.comli>
    <li>@hotmail.comli>
    <li>@yahoo.com.cnli>
    <li>@sohu.comli>
    <li>@yahoo.cnli>
    <li>@gmail.comli>
    <li>@tom.comli>
  ul>
div>

具体的布局ＣＳＳ代码就不发了，这个比较简单，可以自己设计，我只发一下写入ｊｓ后的ｃｓｓ补充：

#maillist, #register .toemail iframe {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #fff;
    border-color: -moz-use-text-color #ccc #ccc;
    border-image: none;
    border-right: 1px solid #ccc;
    border-style: none solid solid;
    border-width: 0 1px 1px;
    display: none;
    left: 0;
    position: absolute;
    top: 41px;
    width: 226px;
    z-index: 999;
}

#maillist ul li{
    color:#666;
    cursor:pointer;
}

#maillist ul li:hover{
    color:#999;
}

我写的ｊｓ代码：

<script type="text/javascript">
    function $$(id){
		return document.getElementById(id);
	}
	var lists;
	var len;
	window.οnlοad=function(){
		var objtxt=$$("regemail");
		var objlist=$$("maillist");

        lists=objlist.getElementsByTagName("li");
        len=lists.length;

        //给每个li绑定一个鼠标的点击事件
        for(var i=1;ifunction(){
                objtxt.value=this.textContent;
                objlist.style.display="none";
            }
        }

        //计算这个层的显示位置
        objtxt.οnfοcus=function(){
            objlist.style.display="block";
        }
        objtxt.οnblur=function(){
            objlist.style.display="none";
        }

        //当松开键盘的按键的时候
        objtxt.οnkeyup=function(){
            //获取文本框中的值
            var txt=this.value;
            var flag="";
            if(txt.indexOf("@")>0){
                flag=txt.substring(txt.indexOf("@")-1);//获取的输入的@开始的内容
                txt=txt.substring(0,txt.indexOf("@"));
            }else{
                flag="";
            }
            var val="";
            //将这个值放到所有的li前面
            for(var i=1; i"@"));
                lists[i].textContent=txt+val;
            }

            //如果用户输入了@，则检查哪些是满足条件的
            if(flag!=""){
                var reg=new RegExp(flag,"i");
                for(var i=1;iif(reg.test(lists[i].textContent)){
                        lists[i].style.display="block";
                    }else{
                        lists[i].style.display="none";
                    }
                }
            }
        }
    }
script>

具体注释已经写入代码部分了，最后的功能还是完美实现了。哈哈