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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
小程序外卖订单界面的示例代码
Dec 30 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 之入门篇
2006/12/04 PHP
php巧获服务器端信息
2006/12/06 PHP
php实现mysql封装类示例
2014/05/07 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
PHP强制转化的形式整理
2020/05/22 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
python和shell变量互相传递的几种方法
2013/11/20 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
Python实现Linux监控的方法
2019/05/16 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
办公室文员自荐书
2014/02/03 职场文书
大一新生期末自我评价
2014/09/12 职场文书
2015年小学开学寄语
2015/02/27 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
python使用glob检索文件的操作
2021/05/20 Python
opencv 分类白天与夜景视频的方法
2021/06/05 Python