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 相关文章推荐
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
async/await地狱该如何避免详解
May 10 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
原生js+ajax分页组件
Jan 30 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 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语句将数据库*.sql文件导入数据库
2014/05/05 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
php检测文本的编码
2015/07/26 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
js选项卡的实现方法
2015/02/09 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
小程序云开发实战小结
2018/10/25 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
js实现简单扫雷
2020/11/27 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
python 开发的三种运行模式详细介绍
2017/01/18 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
Python实现购物车购物小程序
2018/04/18 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
房屋委托书范本
2014/04/04 职场文书
班主任评语大全
2014/04/26 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
学前教育见习总结
2015/06/23 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript
正则表达式基础与常用验证表达式
2022/06/16 Javascript