邮箱自动填充js

1，页面处理

<input placeholder="请输入您的电子邮箱地址" id="email" name="email" type="text"   "/>
<div id="auto-show" class=""></div>

2.css处理

.autopop{position: absolute;background: #fff;border: 1px #ddd solid;box-shadow: 0px 1px 4px #ccc inset;border-radius: 3px;color: #999;z-index: 19;visibility: hidden;width: 205px;}
.autopop div{font-size:12px;height: 24px;line-height: 24px;padding: 0 6px;cursor: pointer;overflow: hidden;}
.autopop div.notpop{cursor: default;}
.autopop div.pop{background: #dee;color:#333;}

3.js处理

//define args
//常用邮件列表数组
var emailList = ["@163.com", "@126.com","@qq.com", "@gmail.com","@sina.com" ,"@sina.cn","@hotmail.com","@sohu.com","@139.com","@wo.com.cn","@189.cn"];
//新项的索引(用于设置高亮显示的样式)
var newIndex = 0;
//旧项的索引(用于取消原有高亮显示的样式)
var oldIndex = 0;
//邮件列表个数
var counts = emailList.length;

//自动显示
function autoShow() {
    var obj = document.getElementById("email");
    var mailAddressList = document.getElementById("auto-show");
    var x = 0, y = 0, o = obj; h = obj.offsetHeight;
    while (o != null) {
        x += o.offsetLeft;
        y += o.offsetTop;
        o = o.offsetParent;
    }
    mailAddressList.style.left = x + 'px';
    mailAddressList.style.top = y + h + 'px';
    mailAddressList.style.visibility = "visible";
}
//自动隐藏
function autoHide() {
    var mailAddressList = document.getElementById("auto-show");
    mailAddressList.style.visibility = "hidden";
}

//鼠标移入设置样式
function setStyle(obj) {
    oldIndex = newIndex;
    newIndex = $(obj).attr("id");
    $(obj).addClass("pop");
    $("div #" + oldIndex).removeClass("pop");
    setValue(newIndex, $("#email"));
}
//鼠标移出取消样式
function cancelStyle(obj) {
    $(obj).removeClass("pop");
}
//按上下键设置样式
function setStyleForChange() {
    //handle newIndex
    newIndex = newIndex > counts ? 1 : newIndex;
    newIndex = newIndex < 1 ? counts : newIndex;
    $("div #" + newIndex).addClass("pop");
    $("div #" + oldIndex).removeClass("pop");
}

//给文本框设置值
function setValue(newIndex, emailInput) {
    var addr = $("div #" + newIndex).text();
    emailInput.val("");
    emailInput.val(addr);
}

$(document).ready(function () {
    var emailInput = $("#email");
    var emailListDiv = $("#auto-show");
    var emailVaule = emailInput.val();
    //bind focus event(获得焦点)
    emailInput.focus(autoShow);
    //bind blur event(失去焦点)
    emailInput.blur(autoHide);
    emailListDiv.addClass("autopop");
    
    emailInput.keyup(function (event) {
        var myEvent = event || window.event;
        var keyCode = myEvent.keyCode; //获得键值
        switch (keyCode) {
        	case 9:			//Tab键
        		autoHide;
				break;
        	case 32:	//Spacebar
				return false;
				break; 
        	case 13:	//press enter key(回车键)
        		 //set value for input
                setValue(newIndex, emailInput);
                //set div hidden
                autoHide();
                break;
        	case 38:	//press up key(向上键)
        		 oldIndex = newIndex;
                 newIndex--;
                 setStyleForChange();
                 //set value for input
                 setValue(newIndex, emailInput);
                 break;
        	case 40:	//press down key(向下键)
        		 oldIndex = newIndex;
                 newIndex++;
                 setStyleForChange();
                 //set value for input
                 setValue(newIndex, emailInput);
				break;
	        default:
	        	$("#auto-show").empty();
	        	var currentVal = emailInput.val();
	        	var s = currentVal.indexOf("@");//获取到用户输入内容里“@”的位置
	        	var r = "";
	        	var u = currentVal;
	        	var html = '<div class="notpop">请选择邮箱类型</div>';//第一条肯定是提示
	        	if (s >= 0) {
	            	u = currentVal.substr(0, s);
	    			r = currentVal.substr(s + 1);
	    		}//把输入内容根据“@”分成两部分
	    		for (var i = 0; i < counts; i++) {//循环下一开始定义的邮箱数组
	    			if (r.length > 0) {//如果用户输入了邮箱后缀一部分
	    				if (emailList[i].indexOf(r) > -1 && r != emailList[i]){//判断数组内是否有用户输入的邮箱后缀且不是全等于，思考下为什么不是全等于？
	    					html += "<div id='" + (i + 1).toString() + "' οnmοuseοver='setStyle(this)' οnmοuseοut='cancelStyle(this)'>" + u +  emailList[i] + "</div>";
	    				}
	    			} else{
	    				html += "<div id='" + (i + 1).toString() + "' οnmοuseοver='setStyle(this)' οnmοuseοut='cancelStyle(this)'>" + u +  emailList[i] + "</div>";
	        		}
	    		}
	    		$("#auto-show").append(html);
        }
    });
});