JS实现的邮箱提示补全效果示例


Posted in Javascript onJanuary 30, 2018

本文实例讲述了JS实现的邮箱提示补全效果。分享给大家供大家参考,具体如下:

现在要实现的是类似网易登录时的邮箱提示框的效果,不过这里我打算稍微改变一下,就是在输入@的时候再出现邮箱提示列表

实现提示的原理是采用正则进行匹配

效果图如下:

JS实现的邮箱提示补全效果示例

代码如下:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>邮箱补全提示</title>
  <style>
    ul{padding:0px;margin:0px;}
    .login_autoComplete{width:256px;border:1px solid #4190db;position:absolute;background-color:#ffffff;z-index:99;top:109px;left:40px;display:none}
    .login_auto_ul em{font-style:normal}
    .login_auto_ul li.login_auto_title{font-weight:normal;line-height:30px;}
    .login_auto_ul li{line-height:22px;text-indent:5px;font-family:"Arial";cursor:pointer;font-weight:bold;color:#333}
    .login_auto_ul li.hover,.login_auto_ul li.curr{color:#ffffff;background-color:#6eb6fe}
  </style>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>
    window.email_auto = function(selector){
      var elt = $(selector);
      var strHtml = '<div class="login_autoComplete" id="login_autoComplete">'+
            '    <ul class="login_auto_ul">'+
            '      <li class="login_auto_title">请选择邮箱后缀</li>'+
            '      <li class="hover" hz="@qq.com"></li>'+
            '      <li hz="@163.com"></li>'+
            '      <li hz="@126.com"></li>'+
            '      <li hz="@yahoo.com"></li>'+
            '      <li hz="@sina.com"></li>'+
            '      <li hz="@21cn.com"></li>'+
            '    </ul>'+
            '  </div>';
      var lc = "#login_autoComplete";
      var autoComplete,autoLi;
      if($(lc).length==0){
        $("body").append(strHtml);
        $(lc).data("elt",elt);
        autoComplete = $("#login_autoComplete");
        autoLi = autoComplete.find("li:not(.login_auto_title)");
        autoLi.mouseover(function(){
          $(this).siblings().filter(".hover").removeClass("hover");
          $(this).addClass("hover");
        }).mouseout(function(){
          $(this).removeClass("hover");
        }).mousedown(function(){
          $(lc).data("elt").val($(this).text()).change();
          $(this).parent().parent().hide();
        });
      }else{
        $(lc).data("elt",elt);
        autoComplete = $("#login_autoComplete");
        autoLi = autoComplete.find("li:not(.login_auto_title)");
      }
      $(lc).css("width",elt.outerWidth()-1);
      //用户名补全+翻动
      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
        });
        if(autoLi.filter(":visible").length==0){
          autoComplete.hide();
        }else{
          autoLi.filter(":visible").eq(0).addClass("hover");
        }
      }).change(function(){
        $("#login_autoComplete").hide();
      }).keydown(function(e){
        if(e.keyCode==38){ //上
          autoLi.filter(".hover").prev().not(".login_auto_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){ //Enter
          autoLi.filter(".hover").mousedown();
        }
      }).focus(function(){
        $("#login_autoComplete").data("elt",$(this));
      });
    }
    $(function(){
      email_auto("#xxx");
    });
  </script>
</head>
<body>
三水点靠木测试:邮箱补全提示<br/>
<input type="text" id="xxx" style="width:300px"/>
</body>
</html>
Javascript 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
Antd的table组件表格的序号自增操作
Oct 27 Javascript
JS实现的抛物线运动效果示例
Jan 30 #Javascript
express如何使用session与cookie的方法
Jan 30 #Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 #Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 #Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 #Javascript
微信小程序数据存储与取值详解
Jan 30 #Javascript
Vue精简版风格概述
Jan 30 #Javascript
You might like
PHP身份证校验码计算方法
2016/08/10 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
js实现省级联动(数据结构优化)
2020/07/17 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
Django小白教程之Django用户注册与登录
2016/04/22 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Python上下文管理器全实例详解
2019/11/12 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
高中校园广播稿
2014/01/11 职场文书
运动会表扬稿大全
2014/01/16 职场文书
高三毕业寄语
2014/04/10 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
简易版租房协议书范本
2014/10/13 职场文书
2014年维稳工作总结
2014/11/18 职场文书