jQuery实现邮箱下拉列表自动补全功能_jquery_脚本之家

在做这个功能时候,我参考的是网易注册(

邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去

本文实例讲述了jQuery实现手机号正则验证输入及自动填充空格功能。分享给大家供大家参考,具体如下:

记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能。今天小编给给大家分享下我基于jquery是怎么实现此功能的!

在线演示:

{ $.fn.mailAutoComplete = function{ var defaults = { boxClass: "mailListBox", //外部box样式 listClass: "mailListDefault", //默认的列表样式 focusClass: "mailListFocus", //列表选样式中 markCalss: "mailListHlignt", //高亮样式 zIndex: 1, autoClass: true, //是否使用插件自带class样式 mailArr: ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"], //邮件数组 textHint: false, //文字提示的自动显示与隐藏 hintText: "", focusColor: "#333" //blurColor: "#999" }; var settings = $.extend({}, defaults, options || {}); //页面装载CSS样式 if(settings.autoClass && $.size{ $('.mailListBox{border:1px solid #369; background:#fff; font:12px/20px Arial;}.mailListDefault{padding:0 5px;cursor:pointer;white-space:nowrap;}.mailListFocus{padding:0 5px;cursor:pointer;white-space:nowrap;background:#369;color:white;}.mailListHlignt{color:red;}.mailListFocus .mailListHlignt{color:#fff;}').appendTo; } var cb = settings.boxClass, cl = settings.listClass, cf = settings.focusClass, cm = settings.markCalss; //插件的class变量 var z = settings.zIndex, newArr = mailArr = settings.mailArr, hint = settings.textHint, text = settings.hintText, fc = settings.focusColor, bc = settings.blurColor; //创建邮件内部列表内容 $.createHtml = function{ var mailHtml = ""; if{ $.each{ if{ mailHtml += ''+str+'@'+arr[i]+''; }else{ mailHtml += ''+str+'@'+arr[i]+''; } }); } return mailHtml; }; //一些全局变量 var index = -1, s; ${ var that = $, i = $; if{ //只绑定一个文本框 return; } var w = that.outerWidth(), h = that.outerHeight的宽高 //样式的初始化 that.wrap('') .before(''); var x = $, liveValue; //列表框对象 that.focus{ //父标签的层级 $.css.css; //提示文字的显示与隐藏 if{ var focus_v = $.trim; if{ $; } } //键盘事件 $.keyup{ s = v = $.trim; if{ s = v.replace; } if{ //如果按键是上下键 if{ //向上 if{ index = newArr.length; } index--; }else if{ //向下 if(index >= newArr.length - 1){ index = -1; } index++; }else if{ //回车 if(index > -1 && index < newArr.length){ //如果当前有激活列表 $.val.text; } }else{ if{ index = -1; //获得@后面的值 //s = v.replace; //创建新匹配数组 var site = v.replace; newArr = $.map{ var reg = new RegExp){ return n; } }); }else{ newArr = mailArr; } } x.html($.createHtml.css; if{ //回车 if(index > -1 && index < newArr.length){ //如果当前有激活列表 x.css; } } }else{ x.css; } }).blur{ if{ var blur_v = $.trim; if{ $; } } $.css.unbind.css; x.css; }); //鼠标经过列表项事件 //鼠标经过 $.live("mouseover", function(){ index = Number.split; liveValue = $.text(); x.children.removeClass; $.removeClass; x.bind("mousedown", function(){ that.val; }; });

常用邮箱:$.mailAutoComplete({boxClass: "out_box", //&#22806;&#37096;box&#26679;&#24335;listClass: "list_box", //&#40664;&#35748;&#30340;&#21015;&#34920;&#26679;&#24335;focusClass: "focus_box", //&#21015;&#34920;&#36873;&#26679;&#24335;&#20013;markCalss: "mark_box", //&#39640;&#20142;&#26679;&#24335;autoClass: false,textHint: true //&#25552;&#31034;&#25991;&#23383;&#33258;&#21160;&#38544;&#34255;});
 Document    $.keyup{ /* &#25163;&#26426;&#21495;&#39564;&#35777;&#26102;&#65306; var pattern = /^1[3|4|5|7|8]\d{1}\s\d{4}\s\d{4}$/; pattern.test; */ _self = $.length == 3 || _self.val{ var str = _self.val; } }); }); 

功能简述

①初始状态,邮箱栏目未获得焦点时

还有点css,这个可能需要大家自己修改成自己想要的色调

PS:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用:

•填写邮箱名字,出现下拉列表,自动补全邮箱

以及鼠标点击后获得焦点时

  .out_box{border:1px solid #ccc; background:#fff; font:12px/20px Tahoma;} .list_box{border-bottom:1px solid #eee; padding:0 5px; cursor:pointer;} .focus_box{background:#f0f3f9;} .mark_box{color:#c00;} 

JavaScript正则表达式在线测试工具:

•点击上下按键,选取下拉列表邮箱

②以空白字符 以及@开头时,不出现提示菜单

以上就是jquery实现邮箱自动填充提示功能的全部代码,希望对大家的学习有所帮助。

正则表达式在线生成工具:

•按回车键,选中列表内容,隐藏下拉列表

③输入有效字符时,提示下拉菜单出现,用户输入的内容自动添加进菜单,并且第一条提示栏目获得高亮

更多关于jQuery相关内容可查看本站专题:《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

•鼠标经过,下拉列表选项设置为高亮

④输入的字符第一次出现”@”时,输入的”@”并不加入提示菜单

希望本文所述对大家jQuery程序设计有所帮助。

•鼠标点击,选中下拉列表选项,隐藏下拉列表

⑤”@”之后出现有效字符时,就会同提示菜单中的邮件后缀从后缀首位起进行比较,把和用户输入的邮箱后缀不同的提示从菜单中去掉。同时过滤后的第一条提示获得高亮。在完全匹配之后,下拉菜单隐藏。

HTML

⑥用户删除邮件输入框中的字符时,呈现的效果顺序是⑤图3—>⑤图2—>
⑤图1—> ④图

HTML代码很简单,我们就一个简单的输入框,然后一个ul标签,在内部可以放好多li标签。

⑦按下键盘方向键向上或向下使菜单相应提示高亮

CSS

⑧鼠标划过菜单提示时,原先的高亮消失,鼠标划过的栏目获得高亮;鼠标移开,保持之前鼠标划过的栏目高亮,直到用户继续输入字符,栏目失去高亮,同时第一条可见的提示高亮

在CSS中,定义也比较简单,其中有一个 lilight 的
class,可以使背景变色,通过 remove 和 add 这个
class,我们可以轻松地实现下拉列表元素是否选中的区分。

⑨点击高亮提示或者高亮处回车,自动填充邮箱元素,选择完成,菜单收起

.content input{padding:5px 10px;width:200px;}ul.list{list-style:none;padding:0px;margin:0px;overflow:hidden;}ul.list li{border:1px solid #EEE;width:180px;padding:5px 10px;margin:0px;text-overflow:ellipsis; //溢出时变为省略overflow:hidden;}.lilight{background-color:#fafafa;}

⑩在下拉菜单展开时,鼠标点击页面任何元素,菜单收起

JS

注:此功能不包括正则验证邮箱格式。

我们引入 jQuery 来实现对元素的操作,实现了按键和鼠标监听,代码如下

本功能没有用到什么复杂的知识点,只有简单的JS字符串的匹配 、位置检索
、截取
以及jQuery选择器的应用等。更主要的是对功能的逻辑分析要思路清晰,以及思考如何设计能真正使用户操作简便。这个功能的事件主要包括:

${//声明所有的电子邮件变量var mail=new Array("sina.com.cn","126.com","163.com","gmail.com","qq.com","vip.qq.com","hotmail.com","sohu.com","139.com","vip.sina.com","cuiqingcai.com");//生成一个个li,并加入到ul中for(var i=0;i@"+mail[i]+"");liElement.appendTo;}//首先让list隐藏起来$;$.keyup{//键入的内容不是上下箭头和回车if(event.keyCode!=38&&event.keyCode!=40&&event.keyCode!=13){//如果输入的值不是空或者不以空格开头if!=""&& $.trim.match{$;//如果当前有已经高亮的下拉选项卡,那么将其移除if($.hasClass{$.removeClass;}//如果还存在下拉选项卡,那么将其高亮if($){$("ul.list li:visible:eq.addClass;}}else{//否则不进行显示$;$.removeClass;}//输入的内容还没有包括@符号if.match{$.text;}else{//输入的符号已经包含了@var str = $;var strs = str.split;$.text.val().length>=strs[0].length+1){tail=str.substr;$.each{//如果数组中的元素是以文本中的后缀开头,那么就显示,否则不显示if.match.text{//隐藏其他的li$;}else{//显示所在的li$;}});}}}//按了回车时,将当前选中的元素写入到文本框中if{$.val($("ul.list li.lilight:visible").text.hide;//监听上下方向键$.keydown{//下方向键按下了if{if.is{if($.nextAll{$.removeClass.addClass;}}}//下方向键按下了if{if.is{if($.prevAll{$.removeClass.addClass;//当鼠标点击某个下拉项时,选中该项,下拉列表隐藏$.click{$.text.hide;//当鼠标划过某个下拉项时,选中该项,下拉列表隐藏$.hover{$.removeClass.addClass;//当鼠标点击其他位置,下拉列表隐藏$.click{$; }); 

HTML和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的样式 */

其实还有一个比较强大的插件,叫autocomplete,同样可以实现下拉列表的自动补全,功能更加完善,如果大家有兴趣可以去试一下。不过感觉最常用的就是邮箱自动补齐,而且直接用
jQuery
就可以比较方便地实现,所以博主就没有使用autocomplete插件,而是自己写了一下,一来练习一下,二来对这种功能的实现了解得更加透彻。

在DOM加载完毕后,初始化邮件列表并隐藏下拉菜单,JS代码片段:

以上所述是小编给大家介绍的jQuery实现邮箱下拉列表自动补全功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

${ //初始化邮箱列表 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[i]+""); $liElement.appendTo; } //下拉菜单初始隐藏 $; //其他事件..........});

输入框$的keyup和keydown事件是该功能的主要事件,输入字符时之所以用keyup事件而不用keydown事件是因为keyup事件在用户将键盘按键抬起时触发,是整个按键动作的最后阶段,所以在抬起按键时能看到相应的动作即实时看到输入的字符;而使用keydown事件时,只有在下一次按下键盘按键时才能看到上一次按下按键触发的动作,所以keydown事件在通过键盘获得页面控制方面用的比较多,因此在使用键盘方向键↑↓选择菜单提示时使用keydown事件。

//在邮箱输入框输入字符 $.keyup{ //........ })

邮件输入框$的keyup事件:

①有输入的按键,使输入框有长度(
因为删除事件也是判断匹配以及长度,所以只需要添加删除事件特有的动作,而不必在此处排除删除事件
)

if(event.keyCode!=38 && event.keyCode!=40 && event.keyCode!=13){ //菜单展现,需要排除空格开头和"@"开头 if)!="" && $.trim.match { $; //同时去掉原先的高亮,把第一条提示高亮 if($.hasClass { $.removeClass; } $(".autoul li:visible:eq.addClass; }else{//如果为空或者"@"开头 $; $.removeClass; } //把输入的字符填充进提示,有两种情况:1.出现"@"之前,把"@"之前的字符进行填充;2.出现第一次"@"时以及"@"之后还有字符时,不填充 //出现@之前 if.match{//输入了不含"@"的字符或者"@"开头 if.match{ //不以"@"开头 $.children.text; } }else{ //输入字符后,第一次出现了不在首位的"@" //当首次出现@之后,有2种情况:1.继续输入;2.没有继续输入 //当继续输入时 var str = this.value;//输入的所有字符 var strs = new Array(); strs = str.split;//输入的所有字符以"@"分隔 $;//"@"之前输入的内容 var len = strs[0].length;//"@"之前输入内容的长度 if(this.value.length>len+1){ //截取出@之后的字符串,@之前字符串的长度加@的长度,从第位开始截取 var strright = str.substr; //正则屏蔽匹配反斜杠"\" if(strright.match{ strright.replace; return false; } //遍历li $.each{ //遍历span //$.children.each{ //@之后的字符串与邮件后缀进行比较 //当输入的字符和下拉中邮件后缀匹配并且出现在第一位出现 //$ span.step if.children.match!=null && $.indexOf{ //class showli是输入框@后的字符和邮件列表对比匹配后给匹配的邮件li加上的属性 $.addClass; //如果输入的字符和提示菜单完全匹配,则去掉高亮和showli,同时提示隐藏 if(strright.length>=${ $.removeClass.removeClass; } }else{ $.removeClass; } if.hasClass.parent.parent.children.addClass; }else{ $; $.removeClass; }else{ //"@"后没有继续输入时 $.show.removeClass; $("ul.autoul li.lihover").removeClass; $.addClass; } }}//有效输入按键事件结束

②按键为backspace

if(event.keyCode == 8 || event.keyCode == 46){ $.children().removeClass.next().children.addClass; }//删除事件结束

if{ //使光标始终在输入框文字右边 $.val; }//方向键↑结束

if{ if.is { $.val($("ul.autoul li.lihover").children + "@" + $("ul.autoul li.lihover").children; } $.hide.children().removeClass; $;//回车后输入栏获得焦点}

至此keyup事件结束。

#的keydown事件

$.keydown{ if{ //按键为↓时.... } if{ //按键为↑时.... } })

if{ //当键盘按下↓时,如果已经有li处于被选中的状态,则去掉状态,并把样式赋给下一条li if .is { //如果还存在下一条li的话 if ($("ul.autoul li.lihover").nextAll { if ($("ul.autoul li.lihover").nextAll { $("ul.autoul li.lihover").removeClass .nextAll.addClass; } else { $("ul.autoul li.lihover").removeClass.removeClass .next.addClass; $.children; } } else { $("ul.autoul li.lihover").removeClass; $("ul.autoul li:visible:eq.addClass; } } }

if{ //当键盘按下↓时,如果已经有li处于被选中的状态,则去掉状态,并把样式赋给下一条li if.is{ //如果还存在上一条li的话 if($("ul.autoul li.lihover").prevAll{ if($("ul.autoul li.lihover").prevAll{ $("ul.autoul li.lihover").removeClass .prevAll.addClass; }else{ $("ul.autoul li.lihover").removeClass.removeClass .prev.addClass; $.children; } }else{ $("ul.autoul li.lihover").removeClass; $("ul.autoul li:visible:eq("+($("ul.autoul li:visible").length-1)+")").addClass; } }else{ //当键盘按下↓时,如果之前没有一条li被选中的话,则第一条li被选中 $("ul.autoul li:visible:eq("+($("ul.autoul li:visible").length-1)+")").addClass; }}

至此keydown事件结束。

⑦当鼠标点击下拉菜单的具体一条内容时

$.click{ $.val.children.children.children; $; //鼠标点击下拉菜单具体内容事件结束

⑧当鼠标点击document时,下拉隐藏

$.click{ $; //鼠标点击document事件结束

$.hover{ if.hasClass{ $.removeClass.addClass;

发表评论

电子邮件地址不会被公开。 必填项已用*标注