邮箱自动完成的效果在网站上大多都看过，但是质量参差不齐，今天突然在网上看到一篇博客，感觉这个插件很好，就想来写一下分享给大家！
 效果图如下：
完整demo代码如下：
邮箱地址自动完成功能

js实现效果代码（jquery.mailautocomplete-4.0.js）如下：
(function($) { $.fn.mailautocomplete = function(options) { var defaults = { classname: emailist, email: [qq.com,gmail.com,126.com,163.com,hotmail.com,yahoo.com,yahoo.com.cn,live.com,sohu.com,sina.com], //邮件数组 zindex: 11 }; // 最终参数 var params = $.extend({}, defaults, options || {}); // 是否现代浏览器 var ismodern = typeof window.screenx === number, visibility = visibility; // 键值与关键字 var key = { up: 38, down: 40, enter: 13, esc: 27, tab: 9 }; // 组装html的方法 var fnemaillist = function(input) { var htmlemaillist = '', arrvalue = input.value.split(@), arremailnew = []; $.each(params.email, function(index, email) { if (arrvalue.length !== 2 || arrvalue[1] === || email.indexof(arrvalue[1].tolowercase()) === 0) { arremailnew.push(email); } }); $.each(arremailnew, function(index, email) { htmlemaillist = htmlemaillist + ''+ arrvalue[0] + @ + email +''; }); return htmlemaillist; }; // 显示还是隐藏 var fnemailvisible = function(ul, isindexchange) { var value = $.trim(this.value), htmllist = ''; if (value === || (htmllist = fnemaillist(this)) === ) { ul.css(visibility, hidden); } else { isindexchange && (this.indexselected = -1); ul.css(visibility, visible).html(htmllist); } }; return $(this).each(function() { this.indexselected = -1; // 列表容器创建 var element = this; var eleul = $('').css({ position: absolute, margintop: element.offsetheight, minwidth: element.offsetwidth - 2, visibility: hidden, zindex: params.zindex }).addclass(params.classname).bind(click, function(e) { var target = e && e.target; if (target && target.tagname.tolowercase() === li) { $(element).val(target.innerhtml).trigger(input); $(this).css(visibility, hidden); element.focus(); // add on 2013-11-20 } }); $(this).before(eleul); // ie6的宽度 if (!window.xmlhttprequest) { eleul.width(element.offsetwidth - 2); } // 不同浏览器的不同事件 ismodern? $(this).bind(input, function() { fnemailvisible.call(this, eleul, true); }): element.attachevent(onpropertychange, function(e) { if (e.propertyname !== value) return; fnemailvisible.call(element, eleul, true); }); $(document).bind({ click: function(e) { var target = e && e.target, htmllist = ''; if (target == element && element.value && (htmllist = fnemaillist(element, params.email))) { eleul.css(visibility, visible).html(htmllist); } else if (target != eleul.get(0) && target.parentnode != eleul.get(0)) { eleul.css(visibility, hidden); } }, keydown: function(e) { var eleli = eleul.find(li); if (eleul.css(visibility) === visible) { switch (e.keycode) { case key.up: { element.indexselected--; if (element.indexselected = eleli.length) { element.indexselected = 0; } e.preventdefault && e.preventdefault(); break; } case key.enter: { e.preventdefault(); eleli.get(element.indexselected) && $(element).val(eleli.eq(element.indexselected).html()); eleul.css(visibility, hidden); break; } case key.tab: case key.esc: { eleul.css(visibility, hidden); break; } } if (element.indexselected !== -1) { eleul.html(fnemaillist(element)); } } } }); }); };})(jquery);
以上就是本文的全部内容，希望对大家的学习有所帮助。