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 相关文章推荐
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
全面分析JavaScript 继承
May 30 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 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 生成N个不重复的随机数
2015/01/21 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
php处理带有中文URL的方法
2016/07/11 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
事件模型在各浏览器中存在差异
2010/10/20 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
python实现百度语音识别api
2018/04/10 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
python3人脸识别的两种方法
2019/04/25 Python
python print出共轭复数的方法详解
2019/06/25 Python
简单了解python PEP的一些知识
2019/07/13 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
英文版银行求职信
2013/10/09 职场文书
大学老师推荐信
2014/02/25 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
会计专业求职信
2014/08/10 职场文书
运动员入场前导词
2015/07/20 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python