脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery邮箱自动补全

jquery css实现邮箱自动补全

 更新时间：2016年11月14日 08:52:51   作者：碌碌无为是罪过  
这篇文章主要为大家详细介绍了jquery css实现邮箱自动补全功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • jQuery判断对象是否存在的方法整理

    jQuery判断对象是否存在的方法整理

    这篇文章主要介绍了jQuery判断对象是否存在的方法,对比分析了纯javascript与jQuery实现判断对象是否存在的功能区别,是非常实用的技巧,需要的朋友可以参考下
    2015-02-02
  • jQuery代码优化方法总结

    jQuery代码优化方法总结

    本篇文章给大家总结了关于jQuery代码优化方法，如果你这方面有需求，跟着小编一起学习下吧。
    2018-01-01
  • jquery插件制作 手风琴Panel效果实现

    jquery插件制作 手风琴Panel效果实现

    我们今天要做的是手风琴panel，jquery.ui里面有个叫做accordtion的插件，我们要实现的效果和他一样
    2012-08-08
  • jquery编写Tab选项卡滚动导航切换特效

    jquery编写Tab选项卡滚动导航切换特效

    这篇文章主要为大家详细介绍了jquery编写Tab选项卡滚动导航切换特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 仿JQuery输写高效JSLite代码的一些技巧

    仿JQuery输写高效JSLite代码的一些技巧

    这篇文章主要介绍了仿JQuery输写高效JSLite代码的一些技巧,本文计划根据他人对jQuery总结的一些速度方面的技巧和一些建议,来教你提升你的JSLite和javascript代码,需要的朋友可以参考下
    2015-01-01
  • jQuery实现简单弹幕制作

    jQuery实现简单弹幕制作

    这篇文章主要为大家详细介绍了jQuery实现简单弹幕制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • js实现仿京东2级菜单效果(带延时功能)

    js实现仿京东2级菜单效果(带延时功能)

    这篇文章主要介绍了js实现仿京东2级菜单效果,涉及jquery鼠标事件动态操作页面元素属性及延时显示的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jQuery实现发送验证码并60秒倒计时功能

    jQuery实现发送验证码并60秒倒计时功能

    这篇文章主要介绍了jQuery实现发送验证码并60秒倒计时功能，非常不错，代码简单易懂，需要的朋友参考下吧
    2016-11-11
  • jQuery实现的简单动态添加、删除表格功能示例

    jQuery实现的简单动态添加、删除表格功能示例

    这篇文章主要介绍了jQuery实现的简单动态添加、删除表格功能,涉及jQuery事件响应及表格元素动态操作相关实现技巧,需要的朋友可以参考下
    2017-09-09
  • jquery网页元素拖拽插件效果及实现

    jquery网页元素拖拽插件效果及实现

    效果说明：配合已有css样式，载入插件后，网页元素可以随意在窗口内拖拽，设置了原位置半透明和拖拽半透明的效果选项，可根据需要选择。另外，当页面上有多个可拖拽元素时，可以载入另外一个用于设置z-index的插件，模拟windows窗口点击置顶效果。
    2013-08-08

最新评论