jQuery实现邮箱自动填充功能(带下拉提示)

做这个功能的时候参考网易注册(http://reg.163.com/reg/reg.jsp？产品中邮箱列的作用和效果=urs)。该功能的目的是让用户在填写邮件栏的过程中，无需带有邮件后缀的菜单提示，即可方便、快捷、友好地输入自己注册的邮件。在做这个功能的时候，我们需要充分站在用户的角度，看看在正常情况下设计如何最大程度的满足人们的使用习惯，如何设计会让用户觉得不方便。我们先来看看功能实现的演示效果图：

在线演示：http://jsfiddle.net/vudr00xc/embedded/result/

(1)在初始状态下，当邮箱列没有得到焦点时，

当鼠标点击获得焦点时，

(2)当以空白字符(空格、制表符)和@)开始时，不会出现提示菜单

输入有效字符时，出现提示下拉菜单，用户输入的内容自动添加到菜单中，第一个提示列高亮显示

(4)当输入字符第一次出现“@”时，输入“@”不加入提示菜单

当“@”后出现有效字符时，将从第一个后缀开始与提示菜单中的邮件后缀进行比较，与用户输入的邮箱后缀不同的提示将从菜单中删除。同时，过滤后的第一个提示会高亮显示。完全匹配后，下拉菜单将被隐藏。

用户删除邮件输入框中的字符时，呈现的效果顺序为图3-图2-图1-图。

向上或向下按键盘方向键，突出显示菜单中相应的提示

8鼠标穿过菜单提示时，原来的高亮消失，鼠标穿过的列高亮显示；将鼠标移开，并保持鼠标穿过的列高亮显示，直到用户继续输入字符，该列失去高亮显示，第一个可见的提示同时高亮显示

点击高亮提示或在高亮处按回车键自动填写邮箱元素，选择完成并折叠菜单

当下拉菜单展开时，用鼠标点击页面上的任意元素，菜单将关闭

注意：此功能不包括常规验证邮箱格式。

这个函数不使用任何复杂的知识点，只使用简单的JS字符串匹配、indexOf、substring和jQuery选择器的应用。更重要的是，功能的逻辑分析要清晰，思考如何设计才能真正让用户易于操作。该功能的事件主要包括：

代码分析：

HTML和CSS代码：

超文本标记语言

Div class=' ipt '输入类型=' text' name=' u email' id=' u email '占位符='请输入一个公共邮箱'/ul class='autoul'/ul/divCSS。ipt { width:218px}/* div */输入框外围输入{ margin:0左衬垫left:15px填充-右侧：15 px；宽度width:184px}/*输入框*/ul.autoul{ /*下拉菜单*/width :216 px；margin:0px边距-top :-5px；padding:0pxcolor: # 666border:1px固体# 666；border-top :0；飞越：隐藏；}ul.autoul li.autoli{ /*下拉菜单Li */height :30 px；显示：块；列表样式-type : none；text-align : left；cursor:pointer指针；font-size :14 px；线高：30 px；左衬垫left:15px填充-右侧：15 px；飞越：隐藏；/*当对象中的文本溢出时显示省略号*/text-overflow :省略号；}.li over {/*下拉菜单Li高亮样式*/background-color : # eee；} span { padding-right :2 px；}/* liText */。showli { display:block}/*过滤后的样式Li */加载DOM后，初始化邮件列表并隐藏下拉菜单，JS代码片段：

$(function(){ //初始化邮箱列表var mail=newarray ('sina.com '，' 126.com '，' 163.com '，' gmail.com '，' qq.com '，' vip.qq.com '，' hotmail.com '，' so。//将邮箱列表添加到下拉列表中(var I=0；imail.lengthI){ var $ LiElement=$(' Li class=\ ' autoli ' span class=\ ' ex \ '/span span class=\ ' at \ ' @/span span class=\ ' step \ ' ' mail[I]'/span/Li ')；$ LiElement . appendo(' ul . autoul ')；}//下拉菜单最初隐藏$('。autoul’)。hide()；//其他事件..});输入框$('#uemail ')的键上和键下事件是这个函数的主要事件。之所以在输入字符时用按键上事件代替按键下事件，是因为用户抬起键盘按键时触发了按键上事件，这是整个按键动作的最后一个阶段，所以抬起按键时可以看到相应的动作，即可以实时看到输入的字符；使用keydown事件时，上一次按键触发的动作只有下一次按下键盘按键时才能看到，所以keydown事件更多的用于通过键盘获取页面控制，所以使用键盘方向键选择菜单提示时使用keydown事件。

//输入字符$(“# uemail”)的按键事件。keyup (function () {//.})中的邮箱输入框$(“# uemail”):

(1)有输入按钮，使输入框有长度(因为删除事件也会判断匹配和长度，所以只需要添加删除事件特有的动作，这里不需要排除删除事件)

if(event.keyCode！=38 event.keyCode！=40 event.keyCode！=13){ //菜单展现，需要排除空格开头和'@'开头if($ .修剪($(这个)。val())！='' $.修剪（这个值)。match(/^@/)==null ) { $(' .autoul ').show()；//同时去掉原先的高亮，把第一条提示高亮if($(').李。李霍夫' .有类(' lih over '){ $(' .李。李霍夫' .移除CLaSS(' lih over ')；} $('.autoul li:visible:eq(0)').addCLaSS(' lih over ')；}else{//如果为空或者'@'开头$('.autoul ').hide()；$('.autoul li:eq(0)').移除CLaSS(' lih over ')；} //把输入的字符填充进提示，有两种情况：1.出现'@'之前，把'@'之前的字符进行填充；2.出现第一次'@'时以及'@'之后还有字符时，不填充//出现@之前if($ .修剪（这个值)。match(/[^@]@/)==null){//输入了不含'@'的字符或者'@'开头if($ .修剪（这个值)。match(/^@/)==null){ /不以'@'开头$(这个)。下一个()。儿童('里').孩子们。例如')。文本($(这个).val())；} }else{ //输入字符后，第一次出现了不在首位的'@' //当首次出现@之后，有2种情况：1.继续输入；2.没有继续输入//当继续输入时var str=this.value//输入的所有字符var strs=new Array()；strs=str。拆分(“@”)；//输入的所有字符以'@'分隔$('.例如')。文本(strs[0])；//'@'之前输入的内容var len=strs[0].长度；//'@'之前输入内容的长度if(this.value.lengthlen 1){ //截取出@之后的字符串，@之前字符串的长度加@的长度，从第（镜头1)位开始截取var str右=str。substr(len 1)；//正则屏蔽匹配反斜杠\' if(strright.match(/[\\]/)！=null){ strright.replace(/[\\]/，' ')；返回false} //遍历li $('ul.autoul li ').每个（函数(){ //遍历span //$(这个)li $(这个)。儿童(' span.step ').每个（函数(){ //@之后的字符串与邮件后缀进行比较//当输入的字符和下拉中邮件后缀匹配并且出现在第一位出现//$(这个)跨度。步骤if($(' ul。autoul Li ').儿童(' span.step ').文本()。匹配(右)！=null $(这个)。文本()。indexOf(strright)=0){//类显示李是输入框@后的字符和邮件列表对比匹配后给匹配的邮件里加上的属性$(这个)。父项()。addCLaSS(' show Li ')；//如果输入的字符和提示菜单完全匹配，则去掉高亮和昭和，同时提示隐藏if(strright.length=$(this).文本()。长度){ $(这个).父项()。removeClass('showli ').remove CLaSS(“lih over”).hide()；} }else{ $(this).父项()。移除CLaSS(' show Li ')；} if($(this).父项()。有类(' showli '){ $(this).父项()。show()；$(这个)。父代('里').父代(' ul ').儿童(' li.showli:eq(0)').addCLaSS(' lih over ')；}else{ $(this).父项()。hide()；$(这个)。父项()。移除CLaSS(' lih over ')；} });});}else{ //'@ '后没有继续输入时$('.autoul ').儿童()。show()；$('ul.autoul li ').移除CLaSS(' show Li ')；$('ul.autoul li.lihover ').移除CLaSS(' lih over ')；$('ul.autoul li:eq(0)').addCLaSS(' lih over ')；} }}//有效输入按键事件结束

按键为退格(8)或是删除(46)

if(事件。键码==8 | |事件。键码==46){ $(this).下一个()。儿童()。移除CLaSS(' lih over ')；$(这个)。下一个()。子代(“li:visible:eq(0)”).addCLaSS(' lih over ')；}//删除事件结束按键为方向键(38)

if(event.keyCode==38){ //使光标始终在输入框文字右边$(这个)。瓦尔($(这个).val())；}//方向键结束按键为回车键(13)

if(事件。键码==13){ if($ ul。李(autoul Li)).是(' ')。李悬停){ $(# uemail ').val($ ul。李。李浩。)。子代(。前)。text()' @ ' $ '(' ul。李。lihover ').子代(。迈步。)。text())；} $(')。"自动"。子代()。hide()；$(')。"自动"。子代()。移除类(“lih over”)；$(#用户设备邮件').焦点()；//嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨嗨}阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏击键朱庇特朱庇特。

#(# uemail)什么事击键阿叔

$(#用户设备邮件').按键函数(){ if(event.keyCode==40){ //阿云哥.非政府组织-什么.我.} if(event.keyCode==38){ //阿云哥.非政府组织-什么.我.})阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔(40)

if(event.keyCode==40){ //绿筠小姐.非政府组织-什么，唉哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟在那里你好，唉哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟，1826年（喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂)李if($ ul。李。)。是(' ')。李悬停){//哎哎哎哎哎哎哎哎哎（喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂)李阿云if($ ul。李。李浩。)。nextAll().is(' Li 3330 visible '){ if($ ul。李。lihover ').nextAll().hasclass(' showli '){ $(' ul。李。lihover ').remove CLaSS(“lih over”).nextAll('.showli:eq(0 ').添加类(“lih over”)；} else { $('ul.autoul li.lihover ').remove CLaSS(“lih over”).removeClass('showli ').下一个(' li :可见').添加类(“lih over”)；$('ul.autoul ').子代()。show()；} } else { $('ul.autoul li.lihover ').移除类(“lih over”)；$(' ul auto ul Li 3330可见3330 eq(0 ').添加类(“lih over”)；} }阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔页：1

if(event.keyCode==38){ //绿筠小姐.非政府组织-什么，唉哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟在那里你好，唉哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟，1826年（喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂)李if($ ul。李。)。是(' ')。李悬停){//喂？喂？喂（喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂)李阿云if($ ul。李。李浩。)。普雷瓦尔().is(' Li 3330 visible '){ if($ ul。李。lihover ').普雷瓦尔().hasclass(' showli '){ $(' ul。李。lihover ').remove CLaSS(“lih over”).prevAll('.showli:eq(0 ').添加类(“lih over”)；}else{ $('ul.autoul li.lihover ').remove CLaSS(“lih over”).removeClass('showli ').预测(' li :可见').添加类(“lih over”)；$('ul.autoul ').子代()。show()；} }else{ $('ul.autoul li.lihover ').移除类(“lih over”)；$(ul。autoul Li 3330可见3330 eq)($(ul。autoul Li 3330可见))。长度-1")"。添加类(“lih over”)；} }else{ //绿筠小姐.非政府组织-什么，哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟在那里不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，唉哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟（喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂)李阿云$(ul。autoul Li 3330可见3330 eq)($(ul。autoul Li 3330可见))。长度-1")"。添加类(“lih over”)；}}阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏击键朱庇特朱庇特。

-你好-你好

$(')。"自动"一词。单击(function(){ $(# uemail)).val($这)。子代(。前)。text() $(此处)。子代(。"在"一词文本()$(此处)。子代(。迈步。)。text())；$(')。"自动"。hide()；});//朱尼安朱尼安朱尼安朱尼安朱尼安1993年四十岁文件名称-什么，范仲淹呢

$(“正文”).单击(函数(){ $(')."自动"。hide()；});//吴经盛文件名称朱庇特朱庇特伊戈尔伊万诺维奇伊万诺维奇伊万诺维奇伊万诺维奇伊万诺维奇伊万诺维奇伊万诺维奇伊万诺维奇伊万诺维奇伊万诺维奇伊万诺维奇伊万诺维奇在那里-什么

$('ul.autoul li ').hover(function(){ if($ ul。李(autoul Li)).hasclass(' lihover '){ $(' ul。autoul Li ').移除类(“lih over”)；} $(此)。添加类(“lih over”)；});阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏阿苏，吴亚玲！吴亚玲。