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.com</li>
    <li>@163.com</li>
    <li>@126.com</li>
    <li>@sina.com</li>
    <li>@hotmail.com</li>
    <li>@yahoo.com.cn</li>
    <li>@sohu.com</li>
    <li>@yahoo.cn</li>
    <li>@gmail.com</li>
    <li>@tom.com</li>
  </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;i<len;i++){
            lists[i].οnmοusedοwn=function(){
                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<len; i++){
                val=lists[i].textContent;
                val=val.substring(val.indexOf("@"));
                lists[i].textContent=txt+val;
            }

            //如果用戶輸入了@，則檢查哪些是滿足條件的
            if(flag!=""){
                var reg=new RegExp(flag,"i");
                for(var i=1;i<len;i++){
                    if(reg.test(lists[i].textContent)){
                        lists[i].style.display="block";
                    }else{
                        lists[i].style.display="none";
                    }
                }
            }
        }
    }
</script>

具體註釋已經寫入代碼部分了，最後的功能還是完美實現了。哈哈