email 自动补全 兼容主流浏览器

/**
* Email-自动完成组件
* box 装载数组的容器,位于绑定的input下侧
* inputId 需要绑定的input对象的id 【必选】
* souce Array ['163.com','sina.com','126.com','139.com'] 【必选】
* dataList 放在box中的数组
* 使用方法如下：
* var emailArray = ["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"];
* autocomplete.init("需绑定对象的id值", emailArray);
* 需要引用 jquery.js
*/

var autocomplete = {
box: null,
inputObj: null,
inputId: null,
souce: [],
dataList: [],
init: function(inputId, souce) {
this.souce = souce;
inputObj = $("#" + inputId),
that = this;
inputObj.live("focus",
function() {
autocomplete.box.style.display = "block";
});
inputObj.live("input propertychange",
function() {
that.changeEvent()
});
inputObj.live("blur",
function() {
that.focusout()
});
this.createDiv(inputObj);
this.box.style.top = inputObj.offsetTop + inputObj.offsetHeight + "px";
this.box.style.left = inputObj.offsetLeft + "px";
},
changeEvent: function() {
var str = inputObj.val();
if (str.indexOf("@") == -1) {
for (var i = 0; i < autocomplete.dataList.length; i++) {
autocomplete.dataList[i].innerHTML = str + "@" + autocomplete.souce[i];
}
}
},
focusout: function() {
setTimeout(function() {
autocomplete.box.style.display = "none";
},
400)
},
createDiv: function(inputObj) {
this.box = document.createElement("div");
inputObj.after(this.box);
var ulObj = document.createElement("ul");
this.box.appendChild(ulObj);
for (var i = 0; i < this.souce.length; i++) {
var liObj = document.createElement("li");
this.addEvent(liObj, "click",
function() {
if (inputObj.val() != "") {
inputObj.val(liObj.innerHTML)
} else {
alert("请输入邮箱！")
}
});
liObj.innerHTML = this.souce[i];
this.dataList.push(liObj);
ulObj.appendChild(liObj);
}
this.box.style.display = "none";
},
addEvent: function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent("on" + type, fn);
}
}
}