仿新浪微博登录的邮箱地址自动补全功能

 首先，来看一下登录新浪微博的效果图：

 

 

当你开始输入你的电子邮箱前的帐号时，就会出现常用邮箱的列表，并自动补齐。

 

实现的时候，首先在页面上放一个输入文本框和一个div。将div隐藏：

电子邮件：<input id="email" name="email" type="text" autocomplete="off" /> <div id="auto-show"> </div>

 

 

样式定义如下：

<mce:style type="text/css"><!-- #email { width: 150px; } .autoDiv { visibility: hidden; position: absolute; width: 150px; height: 150px; border: 1px solid #00f; background-color: White; } --></mce:style><style type="text/css" mce_bogus="1"> #email { width: 150px; } .autoDiv { visibility: hidden; position: absolute; width: 150px; height: 150px; border: 1px solid #00f; background-color: White; } </style>

 

 

先预览一下，主要的几个js函数：

 

详细代码：

 

//自动显示 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 setValue(newIndex, emailInput) { var addr = $("div #" + newIndex).text().replace(/^/s/s*/, '').replace(//s/s*$/, ''); emailInput.val(""); emailInput.val(addr); } //鼠标移入设置样式 function setStyle(obj) { oldIndex = newIndex; newIndex = $(obj).attr("id"); $(obj).css("background-color", "red"); $("div #" + oldIndex).css("background-color", "white"); setValue(newIndex, $("#email")); } //鼠标移出取消样式 function cancelStyle(obj) { $(obj).css("background-color", "white"); } //按上下键设置样式 function setStyleForChange() { //handle newIndex newIndex = newIndex > counts ? 1 : newIndex; newIndex = newIndex < 1 ? counts : newIndex; $("div #" + newIndex).css("background-color", "red"); $("div #" + oldIndex).css("background-color", "white"); } 

 

 

定义变量：

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

 

下面，主要代码概况：

 

代码：

$(document).ready(function () { var emailInput = $("#email"); var emailListDiv = $("#auto-show"); //bind focus event(获得焦点) emailInput.focus(autoShow); //bind blur event(失去焦点) emailInput.blur(autoHide); emailListDiv.addClass("autoDiv"); //bind the events:mouseover、mouseout for the div for (var i = 0; i < emailList.length; i++) { $("#auto-show").append("<div id='" + (i + 1).toString() + "' οnmοuseοver='setStyle(this)' οnmοuseοut='cancelStyle(this)' >" + emailList[i] + "</div>"); } //handle key's events.(键盘弹出事件处理) emailInput.keyup(function (event) { var myEvent = event || window.event; var keyCode = myEvent.keyCode; //获得键值 //press down key(向下键) if (keyCode == 40) { oldIndex = newIndex; newIndex++; setStyleForChange(); //set value for input setValue(newIndex, emailInput); } //press up key(向上键) if (keyCode == 38) { oldIndex = newIndex; newIndex--; setStyleForChange(); //set value for input setValue(newIndex, emailInput); } //press enter key(回车键) if (keyCode == 13) { //set value for input setValue(newIndex, emailInput); //set div hidden autoHide(); } //press esc key(ESC键) if (keyCode == 27) { autoHide(); } //press a-z|A-Z|0-9 //8对应退格键，46对应删除键 var changedText = (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122) || (keyCode >= 48 && keyCode <= 56); if (changedText) { var currentVal = emailInput.val().replace(/^/s/s*/, '').replace(//s/s*$/, ''); //如果原来已包含有@字符 if (currentVal.indexOf("@") > -1) { emailInput.val(""); for (var i = 1; i <= 6; i++) { $("div #" + i).text("").text(emailList[i - 1]); } return; } for (var i = 1; i <= 6; i++) { $("div #" + i).text("").text(currentVal + emailList[i - 1]); } } //如果按下退格键或删除键 if (keyCode == 8 || keyCode == 46) { emailInput.val(""); for (var i = 1; i <= 6; i++) { $("div #" + i).text("").text(emailList[i - 1]); } } }); });

代码中已有注释，实现不是很复杂，细节处理比较多点。

 

效果图如下：