jQuery 实现自动填充邮箱功能（带下拉提示）
在做这个功能时候，我参考的是网易注册（http://reg.163.com/reg/reg.jsp?product=urs）中的邮箱栏目所实现的功能与效果。这个功能的目的是使用户在填写邮箱栏目的过程中，在带有邮箱后缀名的菜单的提示下，可以不需要完整输入自己的注册邮箱，达到方便、快捷、友好的效果。在做这个功能的时候，需要充分站在使用者的角度，看怎样设计能够最符合通常情况下人们的使用习惯，又怎样设计反而会让用户感到不便。先来看看功能实现的演示效果图：
在线演示：http://jsfiddle.net/vudr00xc/embedded/result/
①初始状态，邮箱栏目未获得焦点时
以及鼠标点击后获得焦点时
②以空白字符( space , tab ) 以及@开头时，不出现提示菜单
③输入有效字符时，提示下拉菜单出现，用户输入的内容自动添加进菜单，并且第一条提示栏目获得高亮
④输入的字符第一次出现"@"时，输入的"@"并不加入提示菜单
⑤"@"之后出现有效字符时，就会同提示菜单中的邮件后缀从后缀首位起进行比较，把和用户输入的邮箱后缀不同的提示从菜单中去掉。同时过滤后的第一条提示获得高亮。在完全匹配之后，下拉菜单隐藏。
⑥用户删除邮件输入框中的字符时，呈现的效果顺序是⑤图3--->⑤图2---> ⑤图1---> ④图
⑦按下键盘方向键向上或向下使菜单相应提示高亮
⑧鼠标划过菜单提示时，原先的高亮消失，鼠标划过的栏目获得高亮；鼠标移开，保持之前鼠标划过的栏目高亮，直到用户继续输入字符，栏目失去高亮，同时第一条可见的提示高亮
⑨点击高亮提示或者高亮处回车，自动填充邮箱元素，选择完成，菜单收起
⑩在下拉菜单展开时，鼠标点击页面任何元素，菜单收起
注：此功能不包括正则验证邮箱格式。
本功能没有用到什么复杂的知识点，只有简单的JS字符串的匹配 ( match )、位置检索 ( indexOf ) 、截取 ( substr ) 以及jQuery选择器的应用等。更主要的是对功能的逻辑分析要思路清晰，以及思考如何设计能真正使用户操作简便。这个功能的事件主要包括：
代码分析：
HTML和CSS代码：
HTML
<div class="ipt"> <input type="text" name="uemail" id="uemail" placeholder="请输入常用邮箱"/> <ul class="autoul"></ul> </div>
CSS
.ipt{ width:218px;}/* 输入框外围div */
input{ margin:0; padding-left:15px; padding-right:15px; width:184px;}/* 输入框 */
ul.autoul{ /* 下拉菜单 */
width:216px;
margin:0px;
margin-top:-5px;
padding:0px;
color:#666;
border:1px solid #666;
border-top:0;
overflow:hidden;
}
ul.autoul li.autoli{ /* 下拉菜单li */
height:30px;
display:block;
list-style-type:none;
text-align:left;
cursor:pointer;
font-size:14px;
line-height:30px;
padding-left:15px;
padding-right:15px;
overflow:hidden;
/*当对象内文本溢出时显示省略标记*/
text-overflow:ellipsis;
}
.lihover{ /* 下拉菜单li高亮样式 */
background-color:#eee;
}
span{ padding-right:2px;}/* li下文字 */
.showli{ display:block;}/* 经过过滤的li的样式 */
在DOM加载完毕后，初始化邮件列表并隐藏下拉菜单，JS代码片段：
$(function(){
//初始化邮箱列表
var mail = new Array("sina.com","126.com","163.com","gmail.com","qq.com","vip.qq.com","hotmail.com","sohu.com","139.com","vip.sina.com","21cn.cn","189.cn","sina.cn");
//把邮箱列表加入下拉
for(var i=0;i<mail.length;i++){
var $liElement = $("<li class=\"autoli\"><span class=\"ex\"></span><span class=\"at\">@</span><span class=\"step\">"+mail[i]+"</span></li>");
$liElement.appendTo("ul.autoul");
}
//下拉菜单初始隐藏
$(".autoul").hide();
//其他事件..........
});
