jquery实现邮箱自动填充提示功能

这篇文章主要介绍了jquery实现邮箱自动填充提示功能，为了提高用户的体验，很多网站都会实现邮箱输入的自动提示功能，对如何实现自动提示功能感兴趣的小伙伴们可以参考一下

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

核心代码（需要jquery的支持）：

 (function($){ $.fn.mailAutoComplete = function(options){ 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 && $("#mailListAppendCss").size() === 0){ $('').appendTo($("head")); } 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(str, arr, cur){ var mailHtml = ""; if($.isArray(arr)){ $.each(arr, function(i, n){ if(i === cur){ mailHtml += ''+str+'@'+arr[i]+'
'; }else{ mailHtml += ''+str+'@'+arr[i]+'
'; } }); } return mailHtml; }; //一些全局变量 var index = -1, s; $(this).each(function(){ var that = $(this), i = $(".justForJs").size(); if(i > 0){ //只绑定一个文本框 return; } var w = that.outerWidth(), h = that.outerHeight(); //获取当前对象（即文本框）的宽高 //样式的初始化 that.wrap('') .before('
'); var x = $("#mailListBox_" + i), liveValue; //列表框对象 that.focus(function(){ //父标签的层级 $(this).css("color", fc).parent().css("z-index", z); //提示文字的显示与隐藏 if(hint && text){ var focus_v = $.trim($(this).val()); if(focus_v === text){ $(this).val(""); } } //键盘事件 $(this).keyup(function(e){ s = v = $.trim($(this).val()); if(/@/.test(v)){ s = v.replace(/@.*/, ""); } if(v.length > 0){ //如果按键是上下键 if(e.keyCode === 38){ //向上 if(index <= 0){ index = newArr.length; } index--; }else if(e.keyCode === 40){ //向下 if(index >= newArr.length - 1){ index = -1; } index++; }else if(e.keyCode === 13){ //回车 if(index > -1 && index  -1 && index

页面（这里就取一个div做实例）：