本文的一个实例讲述了用JS实现邮箱提示的完成效果。分享给大家参考，如下：

我现在想达到的是网易登录时类似邮箱提示框的效果，但是这里我计划稍微修改一下，就是当我输入@，邮箱提示列表会再次出现

实现提示的原则是利用规律性进行匹配

效果图如下：

代码如下：

！doctype html html head meta charset=' utf-8 '/title邮箱补全提示/title style ul { padd :0 px；margin:0px}。log in _ autoComplete { width :256 px；border:1px固体# 4190db位置：绝对；背景-color : # ffffff；z索引：99;top :109 pxleft :40 pxdisplay : none } .登录_ auto _ ul em { font-style : normal } .登录_ auto _ ul Li。log in _ auto _ title { font-weight : normal；线高：30 px} .登录_ auto _ ul Li {行高：22 px文本缩进：5像素；font-family : ' Arial光标：指针指针；字体粗细：加粗；color:#333} .login_auto_ul li.hover .登录_ auto _ ul Li。curr { color : # ffffff背景色： # 6eb 6fe }/样式脚本src=' http :3358 libs。百度。com/jquery/2。0 .0/jquery。量滴js '/脚本脚本窗口。email _ auto=函数(选择器){ var elt=$(选择器);var strHtml=' div class=' log in _ autoComplete ' id=' log in _ autoComplete ' ' ' ul class=' log in _ auto _ ul ' ' ' Li class=' log in _ auto _ title '请选择邮箱后缀/Li ' ' Li class=' hover ' Hz=' @ QQ。com '/Li ' ' Li Hz=' @ 163。com '/Li ' ' Li Hz=' @ 126。com/' Li ' ' Li Hz=' @ Yahoo。com/' Li ' '李赫=' @新浪。com '/Li ' ' Li Hz=' @ 21cn。com '/Li ' '/ul ' '/div '；var lc=' # login _ autoCompletevar自动完成，autoLiif($(lc).长度==0){ $('body ').追加(STRHtml)；$(信用证)。数据(“elt”，ELT)；自动完成=$(' # log in _ autoComplete ')；autoLi=自动完成。find(' li: not(.log in _ auto _ title)')；奥托立。将鼠标悬停在(function(){ $(this))上.兄弟姐妹()。筛选器('。悬停')。removeClass(“”悬停');$(这个)。addClass(')悬停');}).mouseout(函数(){ $(此)).removeClass(“”悬停');}).鼠标向下(函数(){ $(lc)).数据(“elt”).瓦尔($(这个).text()).change()；$(这个)。父项()。父项()。hide()；});}else{ $(lc ).数据(“elt”，ELT)；自动完成=$(' # log in _ autoComplete ')；autoLi=自动完成。find(' li: not(.log in _ auto _ title)')；} $(信用证).css('width '，ELT。out width()-1)；//用户名补全翻动英语教学。向上键(函数(e){ if(/13 | 38 | 40 | 116/.测试(e . KeyCode)| |这个。value==' '){ return false；} var username=this.valueif(用户名。indexof(' @ ')==-1){自动完成。hide()；返回false} AutoLI。每个(函数(){ this。innerHTMl=用户名。替换(/ @).*/,' ')$(这个)。attr('赫兹')；如果(这个。innerhtml。indexof(username)=0){ $(this).show()；}else{ $(this).hide()；} }).筛选器('。悬停')。removeClass(“”悬停');自动完成。show().css({ left : $(this)).偏移量()。左，顶：美元（这个)。偏移量()。top $(这个)。outhealth(true)-1 })；if(autoLi.filter(':visible ').长度==0){自动完成。hide()；} else { AutoLI。过滤器(' :可见').等式(0).addClass(')悬停');} }).change(function(){ $(' # log in _ autoComplete ')).hide()；}).向下键(函数(e){ if(e.keyCode==38){ //上autoLi.filter(' .悬停')。prev().不是('。登录_自动_标题’).addClass(')悬停')。下一个()。removeClass(“”悬停');}else if(e.keyCode==40){ //下autoLi.filter(' .悬停')。下一个()。addClass(')悬停')。prev().removeClass(“”悬停');} else if(例如，键码==13){//输入autoLi.filter(' .悬停')。鼠标向下()；} }).focus(function(){ $(“# log in _ autoComplete”)).数据(' elt '，$(this))；});} $(function(){ email _ auto(' # XXX ')；});/脚本/流浆池我们测试：邮箱补全提示br/输入类型=' text ' id=' XXX ' style=' width :300 px '/body/HTMl:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：

Java脚本语言正则表达式在线测试工具：http://工具。JB 51。net/regex/JavaScript

在线正则表达式生成工具：http://tools.jb51.net/regex/create_reg

更多对JavaScript相关内容感兴趣的读者可以查看本网站的主题：《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。