邮件自动补全插件
<!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>autoComplete</title> <style type="text/css"> *{margin:0; padding:0; border:0;} body{width:1000px; height:1000px;} ul{list-style:none;} .autoComplete{position:relative;} #email{border:1px solid #ccc; height:20px; padding:2px; width:180px;} .autoComplete ul{border:1px solid #ccc; display:none; max-height:200px; overflow-x:hidden; overflow-y:scroll; position:absolute; top:26px; left:0; width:184px;} .autoComplete ul li{border-bottom:1px solid #ccc; cursor:pointer; padding:3px;} .autoComplete .hover{background-color:#D9ECFF;} </style> </head> <body> <input id="email" type="text" value="" autocomplete = "off"/> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript"> (function($){ var autoComplete = function(ele,options){ this.ele = ele; this.ulH = options.ulHeight || 0; this.emailArr = options.emails || []; this.emailArrL = this.emailArr.length; this.init(); }; autoComplete.prototype = { init: function(){ var self = this; self.view('creatDom'); self.event('eleKeyup'); self.event('bodyClick'); }, cache: { enter: 13, up: 38, down: 40 }, view: function(method,arg){ var self = this; var _class = { creatDom: function(arg){ self.ele.attr('rawV','').wrap('<div class="autoComplete"></div>').after('<ul><li>请选择电子邮箱</li></ul>'); self.$ul = self.ele.next(); }, scroll: function(arg){ var liH = $(arg[1][0]).height() + parseInt($(arg[1][0]).css('padding-top'))*2 + 1, liTop = liH*(arg[0]+1); if(liTop >= self.ulH){ self.$ul.scrollTop(liTop-self.ulH); }else{ self.$ul.scrollTop(0); } } }; return _class[method](arg); }, event: function(method,arg){ var self = this; var _class = { eleKeyup: function(arg){ self.ele.keyup(function(e){ var $lis = self.$ul.find('li'), lisLen = $lis.length, val = $.trim(self.ele.val()), valArr = val.split('@'), str = '',index = 1; if($lis){ for(var i=0, len=$lis.length; i<len; i++){ var $li = $($lis[i]); if($li.hasClass('hover')){ index = $li.index(); break; } } }else{ if(e.keyCode === self.cache.down || e.keyCode === self.cache.up || e.keyCode === self.cache.enter){ return; } } switch(e.keyCode){ case self.cache.enter : self.ele.val($($lis[index]).text()).next().hide(); break; case self.cache.up : $lis.removeClass('hover'); if(index-1 === 0){ index = lisLen-1; }else{ index -= 1; } $($lis[index]).addClass('hover'); if(self.ulH !== 0){ self.view('scroll',[index,$lis]); } break; case self.cache.down : $lis.removeClass('hover'); if(index+1 === lisLen){ index = 1; }else{ index += 1; } $($lis[index]).addClass('hover'); if(self.ulH !== 0){ self.view('scroll',[index,$lis]); } break; default: if(valArr[1]){ for(var i=0; i<self.emailArrL; i++){ if(self.emailArr[i].indexOf(valArr[1]) > -1){ str += '<li>'+ valArr[0] + '@' + self.emailArr[i] +'</li>'; } } }else{ for(var i=0; i<self.emailArrL; i++){ str += '<li>'+ valArr[0] + '@' + self.emailArr[i] +'</li>'; } } self.ele.next().html('<li>请选择电子邮箱</li><li class="hover">' + val + '</li>' + str).show(); self.event('eleHover',[]); self.event('eleClick',[]); } }); }, eleHover: function(arg){ self.$ul.find('li').bind('mouseenter',function(){ self.$ul.find('li').removeClass('hover'); $(this).addClass('hover'); }); }, eleClick: function(arg){ self.$ul.find('li').on('click',function(){ self.ele.val($(this).text()).next().hide(); }); }, bodyClick: function(arg){ $('html').click(function(e){ var target = e.target; if(target.value === self.ele.val() || $(target).closest('ul').prev().val() === self.ele.val()){ return; }else{ if(self.$ul[0]){ self.$ul.hide(); } } }); } }; return _class[method](arg); } }; $.fn.autoCompleteMail = function(options){ var opt = $.extend({},$.fn.autoCompleteMail.defaultObj,options); return new autoComplete($(this),opt); }; $.fn.autoCompleteMail.defaultObj = { emails: [] } })(jQuery); $('#email').autoCompleteMail({ emails: ['qq.com','163.com','126.com','sina.com','sohu.com','yahoo.cn','gmail.com','hotmail.com','live.cn'], ulHeight: 200 }); </script> </body> </html>
总体上还是很轻便易用的一个插件
第一次写插件，有不完善的地方希望各位大神能多多给予意见。
