這篇文章主要介紹了jquery實現郵箱自動補全功能，大家參考使用吧
代碼如下: (function($){ $.fn.autoMail = function(options){ var autoMail = $(this); var _value = ''; var _index = -1; var _width = autoMail.outerWidth(); var _height = autoMail.outerHeight(); var _left = autoMail.offset().left; var _top = autoMail.offset().top; autoMail.defaults = { deValue : '請輸入郵箱地址', textCls : 'text-gray', listCls : 'list-mail', listTop : 1, mailArr : ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"] } //初始化 autoMail.init = function(){ autoMail.vars = $.extend({},autoMail.defaults,options); autoMail.val(autoMail.vars.deValue).addClass(autoMail.vars.textCls); autoMail.click(function(event){ autoMail.select().removeClass(autoMail.vars.textCls); if(autoMail.val() != autoMail.vars.deValue){ autoMail.add(); autoMail.order(_value); autoMail.list.find('.item').each(function(){ if($(this).text() == autoMail.val()){ $(this).siblings('.item').removeClass('select'); $(this).addClass('select'); return false; } }) } event.stopPropagation(); }) autoMail.blur(function(event){ if(autoMail.val() == '' || autoMail.val() == autoMail.vars.deValue){ alert(autoMail.val()) autoMail.val(autoMail.vars.deValue).addClass(autoMail.vars.textCls); } }) //文本域鍵盤松開事件 autoMail.keyup(function(event){ if($(autoMail.list).length == 0){ autoMail.add(); } if(autoMail.list.length > 0){ var keyCode = event.keyCode; //alert(keyCode) switch(keyCode){ case 13: autoMail.remove(); autoMail.blur(); break; case 38: _index--; if(_index < 0){ _index = 0; } autoMail.keyOperate(_index); break; case 40: _index++; if(_index > $('.item',autoMail.list).length - 1){ _index = ('.item',autoMail.list).length - 1 } autoMail.keyOperate(_index); break; default: if(autoMail.val().indexOf('@') < 0){ _value = autoMail.val(); autoMail.order(_value); } } } }) $(document).click(function(){ if($(autoMail.list).length > 0){ autoMail.remove(); autoMail.blur(); } }) } //創建列表 autoMail.create = function(){ var li = ''; for(var i = 0; i < autoMail.vars.mailArr.length; i++){ li += '<li class="item">'+ '<span class="style">' + '@' + autoMail.vars.mailArr[i] + '</span>' + '</li>'; } autoMail.list = $('<div class="'+ autoMail.vars.listCls +'"><ul>'+ li +'</ul></div>'); autoMail.list.css({ 'position' : 'absolute', 'left' : _left, 'top' : _top + _height + autoMail.vars.listTop, 'min-width': _width }) autoMail.list.appendTo($('body')); //郵箱列表綁定事件 autoMail.list.find('.item').click(function(event){ autoMail.getVal($(this)); autoMail.remove(); event.stopPropagation(); }) autoMail.list.find('.item').hover( function(){ $(this).addClass('hover'); }, function(){ $(this).removeClass('hover'); } ) return autoMail.list; } //序列化列表 autoMail.order = function(_value){ $('.name',autoMail.list).remove(); var name = $('<span class="name">'+ _value +'</span>'); $('.item',autoMail.list).prepend(name); } //添加列表 autoMail.add = function(){ if(typeof autoMail.list == 'undefined' || autoMail.list.length < 1) autoMail.create(); } //移除列表 autoMail.remove = function(){ if(autoMail.list.length > 0){ autoMail.list.remove(); delete autoMail.list; } } //獲取值 autoMail.getVal = function(obj){ if($('.name',obj).text() != ''){ var selectValue = obj.text(); autoMail.val(selectValue); }else{ return false; } } //鍵盤操作 autoMail.keyOperate = function(_index){ $('.item',autoMail.list).eq(_index).addClass('hover').siblings('.item').removeClass('hover'); autoMail.val($('.item',autoMail.list).eq(_index).text()); } //開始初始話動作... autoMail.init(); } })(jQuery) 代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <script type="text/javascript" src="./jquery.js"></script> <script type="text/javascript" src="./autoMail.js"></script> <script type="text/javascript"> $(function(){ $('.automail').autoMail(); }) </script> <style type="text/css"> *{padding: 0; margin: 0;} body{font-family: "微軟雅黑"; color: #333; font-size: 12px;} ul{list-style: none;} input{ width: 180px; height: 16px; line-height: 16px; margin: 100px; padding: 4px; border: 1px solid #aaa; font-size: 12px; font-family: "微軟雅黑"; } .list-mail ul{ border: 1px solid #aaa; line-heihgt: 24px; padding: 6px; } .list-mail li{ cursor: pointer; padding: 2px 3px; margin-bottom: 2px; } .list-mail .name{ color: #982114; } .list-mail .hover{ background: #fefacf; } .list-mail .select{ background: #dedaae; } </style> </head> <body> <div class="test"></div> <input type="text" class="automail" /> </body> </html>