首页 > 代码库 > 自动完成脚本

自动完成脚本

<!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>
<title>邮箱地址自动完成功能</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>
<input name="myInput" type="text" id="myInput" style="margin:100px;width:198px;">
<script type="text/javascript">
var MailTips = {
    mailArr:["163.com",
            "126.com",
            "qq.com",
            "sina.com",
            "vip.sina.com",
            "hotmail.com",
            "gmail.com",
            "sina.cn",
            "suho.com",
            "yahoo.cn",
            "139.com",
            "wo.com.cn",
            "189.cn"],
    liArr:[],
    box:null,
    input:null,
    cssUrl:‘mailtips.css‘,
    init:function(id){
        var obj = this.input = document.getElementById(id);
        var that = this;
        if(obj.addEventListener){
            obj.addEventListener("input",that.changeEvent,false);
        }else if(obj.attachEvent){
            obj.attachEvent("onpropertychange",that.changeEvent);
        }
        this.addEvent(obj,"blur",that.focusout);
        this.addCss();
        this.createContent();
        this.box.style.top = obj.offsetTop + obj.offsetHeight + "px";
        this.box.style.left = obj.offsetLeft + "px";
    },
    changeEvent:function(){
        var str = MailTips.input.value;
        if(str.indexOf("@") == -1){
            MailTips.box.style.display = "block";
            for(var i=0;i<MailTips.liArr.length;i++){
                MailTips.liArr[i].innerHTML = str + "@" + MailTips.mailArr[i];
            }
        }
    },
    focusout:function(){
        setTimeout(function(){
            MailTips.box.style.display = "none";    
        },100)
    },
    createContent:function(){
        this.box = document.createElement("div");
        this.box.className = "mailtops_css";
        document.body.appendChild(this.box);
        var ul = document.createElement("ul");
        this.box.appendChild(ul);
        for(var i=0;i<this.mailArr.length;i++){
            var li = this.getLi();
            li.innerHTML = this.mailArr[i];
            this.liArr.push(li);
            ul.appendChild(li);    
        }
    },
    getLi:function(){
        var li = document.createElement("li");
        this.addEvent(li,"mouseover",function(){li.className = "overli";});
        this.addEvent(li,"mouseout",function(){li.className = "outli";});
        this.addEvent(li,"click",function(){MailTips.input.value = http://www.mamicode.com/li.innerHTML;});
        return li;
    },
    addEvent:function(obj,type,fn){
        if(obj.addEventListener){
            obj.addEventListener(type,fn,false);    
        }else if(obj.attachEvent){
            obj.attachEvent("on"+type,fn);
        }
    },
    addCss:function(){
        var css = document.createElement("link")
        css.type = "text/css";
        css.href = http://www.mamicode.com/this.cssUrl;
        css.rel = "stylesheet";
        var headElem = document.getElementsByTagName("head")[0];
        headElem.appendChild(css);    
    }
}
</script>
<script type="text/javascript">
MailTips.init("myInput");
</script>
</body>
</html>

自动完成脚本