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);
}
});
});