jquery+css实现邮箱自动补全

 

 今天在公司做一个电子商务网站的注册会员时，要求用户在电子邮箱文本框中输入时，给与热点提示常用的电子邮箱，帮助用户选择，提高体验效果。下面是用Jquery+css实现的邮箱自动补全，供大家参考和学习。

HTML代码：emailAutoComple.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

< title >邮箱自动补全</ title > < meta  http-equiv="content-type" content="text/html; charset=UTF-8"> < link  type="text/css" rel="stylesheet" href="css/emailAutoComple.css">             < form  action="">             姓名：< input  type="text" name="userName" id="userName">< br >             邮箱：< input  type="text" name="email" id="email"> </ form >

 JS代码：js/emailAutoComple.js（实现自动补全的关键代码）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

jQuery.AutoComplete = function(selector){      var elt = $(selector);      var strHtml = '< div  class="AutoComplete" id="AutoComplete">'+                  '        < ul  class="AutoComplete_ul">'+                  '            < li  hz="@163.com"></ li >'+                  '            < li  hz="@126.com"></ li >'+                  '            < li  hz="@139.com"></ li >'+                  '            < li  hz="@189.com"></ li >'+                  '            < li  hz="@qq.com"></ li >'+                  '            < li  hz="@vip.sina.com"></ li >'+                  '            < li  hz="@sina.cn"></ li >'+                  '            < li  hz="@sina.com"></ li >'+                  '            < li  hz="@sohu.com"></ li >'+                  '            < li  hz="@hotmail.com"></ li >'+                  '            < li  hz="@gmail.com"></ li >'+                  '            < li  hz="@wo.com.cn"></ li >'+                  '            < li  hz="@21cn.com"></ li >'+                  '            < li  hz="@aliyun.com"></ li >'+                  '            < li  hz="@yahoo.com"></ li >'+                  '            < li  hz="@foxmail.com"></ li >'+                  '        </ ul >'+                  '    </ div >';      //将div追加到body上      $('body').append(strHtml);               var autoComplete,autoLi;      autoComplete = $('#AutoComplete');             autoComplete.data('elt',elt);      autoLi = autoComplete.find('li');      autoLi.mouseover(function(){          $(this).siblings().filter('.hover').removeClass('hover');          $(this).addClass('hover');      }).mouseout(function(){          $(this).removeClass('hover');      }).mousedown(function(){          autoComplete.data('elt').val($(this).text()).change();          autoComplete.hide();      });      //用户名补全+翻动      elt.keyup(function(e){          if(/13|38|40|116/.test(e.keyCode) || this.value==''){              return false;          }          var username = this.value;          if(username.indexOf('@')==-1){              autoComplete.hide();              return false;          }          autoLi.each(function(){              this.innerHTML = username.replace(/\@+.*/,'')+$(this).attr('hz');              if(this.innerHTML.indexOf(username)>=0){                  $(this).show();              }else{                  $(this).hide();                 }          }).filter('.hover').removeClass('hover');          autoComplete.show().css({              left : $(this).offset().left,              top : $(this).offset().top + $(this).outerHeight(true) - 1,              position: 'absolute',              zIndex: '99999'          });          if(autoLi.filter(':visible').length==0){              autoComplete.hide();          }else{              autoLi.filter(':visible').eq(0).addClass('hover');                     }      }).keydown(function(e){          if(e.keyCode==38){ //上              autoLi.filter('.hover').prev().not('.AutoComplete_title').addClass('hover').next().removeClass('hover');          }else if(e.keyCode==40){ //下              autoLi.filter('.hover').next().addClass('hover').prev().removeClass('hover');          }else if(e.keyCode==13){ //确定              autoLi.filter('.hover').mousedown();          }      }).focus(function(){          autoComplete.data('elt',$(this));      }).blur(function(){          autoComplete.hide();      }); };

 CSS代码：css/emailAutoComple.css

 

#AutoComplete{background:#fff;border:1px solid #4190db;display:none;width:150px;}
#AutoComplete ul{list-style-type:none;margin:0;padding:0;}
#AutoComplete li{color:#333;cursor:pointer;font:12px/22px \5b8b\4f53;text-indent:5px;}
#AutoComplete .hover{background:#6eb6fe;color:#fff;}

 

 

 

 效果图：

 

 

分类:  jquery