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）{$（"<style id="mailListAppendCss" type="text/css">.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;}</style>"）.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 += "<div class="mailHover "+cf+"" id="mailList_"+i+""><span class=""+cm+"">"+str+"</span>@"+arr[i]+"</div>";}else{mailHtml += "<div class="mailHover "+cl+"" id="mailList_"+i+""><span class=""+cm+"">"+str+"</span>@"+arr[i]+"</div>";}}）;}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（"<span style="display:inline-block;position:relative;"></span>"）.before（"<div id="mailListBox_"+i+"" class="justForJs "+cb+"" style="min-width:"+w+"px;_width:"+w+"px;position:absolute;left:-6000px;top:"+h+"px;z-index:"+z+";"></div>"）;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 < newArr.length）{//如果当前有激活列表$（this）.val（$（"#mailList_"+index）.text（））;}}else{if（/@/.test（v））{index = -1;//获得@后面的值//s = v.replace（/@.*/, ""）;//创建新匹配数组var site = v.replace（/.*@/, ""）;newArr = $.map（mailArr, function（n）{var reg = new RegExp（site）;if（reg.test（n））{return n;}}）;}else{newArr = mailArr;}}x.html（$.createHtml（s, newArr, index））.css（"left", 0）;if（e.keyCode === 13）{//回车if（index > -1 && index < newArr.length）{//如果当前有激活列表x.css（"left", "-6000px"）;}}}else{x.css（"left", "-6000px"）;}}）.blur（function（）{if（hint && text）{var blur_v = $.trim（$（this）.val（））;if（blur_v === ""）{$（this）.val（text）;}}$（this）.css（"color", bc）.unbind（"keyup"）.parent（）.css（"z-index",0）;x.css（"left", "-6000px"）;}）;//鼠标经过列表项事件//鼠标经过$（".mailHover"）.live（"mouseover", function（）{index = Number（$（this）.attr（"id"）.split（"_"）[1]）;liveValue = $（"#mailList_"+index）.text（）;x.children（"." + cf）.removeClass（cf）.addClass（cl）;$（this）.addClass（cf）.removeClass（cl）;}）;}）;x.bind（"mousedown", function（）{that.val（liveValue）;}）;}）;};}）（jQuery）;

html示例：

<div class="reg_lin1"><div class="lin1_1">常用邮箱：</div><div class="lin1_2"><input type="text" class = "reg_text" id = "email" name = "email"/></div><div class="lin1_3"></div></div>

调用的jquery代码：

$（"#email"）.mailAutoComplete（{boxClass: "out_box", //外部box样式listClass: "list_box", //默认的列表样式focusClass: "focus_box", //列表选样式中markCalss: "mark_box", //高亮样式autoClass: false,textHint: true //提示文字自动隐藏}）;

css，这大家自己修改成自己想要的色调

 <style type="text/css">.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;}</style>

效果二：
1、此插件为宽度自适应的，也就是当内部文字过长时，外部的div会宽度自动延伸的。在自定义CSS时如果设置了宽度值，则在非IE6浏览器下，宽度自适应失效；
2、无需在样式中为最外部的box设置position属性，或是宽度及高度，这些工作jQuery 插件已经帮你完成，设置了这些属性反而不利于效果的展现；
3、此插件只能使用在单行文本框上，由于未对其他标签类型的元素做限制，所以如果绑定对象不正确，可能会出现一些意想不到的情况.
4.欢迎在使用中提出各种问题和bug.
--------------------------------------------
注:使用方法
CSS代码：

.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;}

JS代码：

$（"#customTest"）.mailAutoComplete（{boxClass: "out_box", //外部box样式listClass: "list_box", //默认的列表样式focusClass: "focus_box", //列表选样式中markCalss: "mark_box", //高亮样式autoClass: false,textHint: true, //提示文字自动隐藏hintText: "请输入邮箱地址"}）;

（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）{$（"<style id="mailListAppendCss" type="text/css">.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;}</style>"）.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 += "<div class="mailHover "+cf+"" id="mailList_"+i+""><span class=""+cm+"">"+str+"</span>@"+arr[i]+"</div>";}else{mailHtml += "<div class="mailHover "+cl+"" id="mailList_"+i+""><span class=""+cm+"">"+str+"</span>@"+arr[i]+"</div>";}}）;}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（"<span style="display:inline-block;position:relative;"></span>"）.before（"<div id="mailListBox_"+i+"" class="justForJs "+cb+"" style="min-width:"+w+"px;_width:"+w+"px;position:absolute;left:-6000px;top:"+h+"px;z-index:"+z+";"></div>"）;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 < newArr.length）{//如果当前有激活列表$（this）.val（$（"#mailList_"+index）.text（））; }}else{if（/@/.test（v））{index = -1;//获得@后面的值//s = v.replace（/@.*/, ""）;//创建新匹配数组var site = v.replace（/.*@/, ""）;newArr = $.map（mailArr, function（n）{var reg = new RegExp（site）; if（reg.test（n））{return n;}}）;}else{newArr = mailArr;}}x.html（$.createHtml（s, newArr, index））.css（"left", 0）;if（e.keyCode === 13）{//回车if（index > -1 && index < newArr.length）{//如果当前有激活列表x.css（"left", "-6000px"）;}}}else{x.css（"left", "-6000px"）;}}）.blur（function（）{if（hint && text）{var blur_v = $.trim（$（this）.val（））;if（blur_v === ""）{$（this）.val（text）;}}$（this）.css（"color", bc）.unbind（"keyup"）.parent（）.css（"z-index",0）;x.css（"left", "-6000px"）; }）; //鼠标经过列表项事件//鼠标经过$（".mailHover"）.live（"mouseover", function（）{index = Number（$（this）.attr（"id"）.split（"_"）[1]）;liveValue = $（"#mailList_"+index）.text（）;x.children（"." + cf）.removeClass（cf）.addClass（cl）;$（this）.addClass（cf）.removeClass（cl）;}）;}）; x.bind（"mousedown", function（）{that.val（liveValue）;}）;}）;}; }）（jQuery）;