jquery css实现邮箱自动补全

编程学习 2021-07-04 19:19www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了jquery css实现邮箱自动补全功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

 今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果。狼蚁网站SEO优化是用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 = '<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;}

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板