jquery css实现邮箱自动补全-PHP开发-PHP中文网

首页

php教程

PHP开发

jquery css实现邮箱自动补全

高洛峰

Dec 07, 2016 am 09:54 AM

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

HTML代码：emailAutoComple.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>邮箱自动补全</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link type="text/css" rel="stylesheet" href="css/emailAutoComple.css">
  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="js/emailAutoComple.js"></script>
  <script type="text/javascript">
    $(function(){
    $.AutoComplete("#email");  //（要补全文本框的id）
    });
  </script>
 </head>
  
 <body>
  <form action="">
        姓名：<input type="text" name="userName" id="userName"/><br/>
        邮箱：<input type="text" name="email" id="email"/>
  </form>
 </body>
</html>

登录后复制

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

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

登录后复制

效果图：