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

2024-12-02 23:31:30

本文实例讲述了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>

PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：

JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

js输入框邮箱自动提示功能代码实现
仿新浪微博登陆邮箱提示效果的js代码
JavaScript输入邮箱自动提示实例代码
一个仿微博登陆邮箱提示框js开发案例
JS实现提交表单前的数字及邮箱校检功能
js仿QQ邮箱收件人选择与搜索功能
JavaScript实现邮箱地址自动匹配功能代码
JavaScript 文本框下拉提示(自动提示)
JS仿百度自动下拉框模糊匹配提示
javascript实现下拉提示选择框
javascript仿百度输入框提示自动下拉补全

JavaScript 文本框下拉提示(自动提示)

文本框下拉提示效果 html{overflow:-moz-scrollbars-vertical;} body{padding:0;margin:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} body,h1,p,blockquote,dl,dt,dd,ul,ol,li,input{margin:0;padding:0;} button,input,select,textarea {font:12px/1.5 tahoma,arial,si
js输入框邮箱自动提示功能代码实现

同理此插件不需要任何html标签,只需要一个输入框有相对应的class类名就ok 且父级有个class类名,其他的都不需要.内部的HTML代码都是自动生成的. HTML代码如下: 复制代码代码如下: <div class="parentCls"> <input type="text" class="inputElem"> </div> 其实上面的div标签都可以不需要只需要在input输入框且父
JavaScript输入邮箱自动提示实例代码

本来想把之前对artTemplate源码解析的注释放上来分享下,不过隔了一年,找不到了,只好把当时分析模板引擎原理后,自己尝试写下的模板引擎与大家分享下,留个纪念,记得当时还对比了好几个模板引擎来着. 这里所说的js的模板引擎,用的是原生的javascript语法,所以很类似php的原生模板引擎. 前端模板引擎的作用? 1. 可以让前端开发更简单,不需要为了生成一个dom结构而使用+运算符去拼接字符串,而只需要一个元素的(里面的html模板),或者一个变量(存储着模板),或者一个模板文件 2
js仿QQ邮箱收件人选择与搜索功能

之前因为项目开发需要,对于收件人选择与搜索的js实现,整理如下: 页面截图: 主要html代码: <#--左侧--> <div> <label>To:</label> <div id="divtxt" class="mailtxt_div"></div> <input type="hidden" name="messName" id="me
一个仿微博登陆邮箱提示框js开发案例

最近在好好的研究JS,通过一个仿邮箱登录提示框的案例加深下对面向对象的理解!啥都别说,先上图: 功能:实现正则匹配显示相符的内容.键盘事件.鼠标事件简单布局: <div id="login"> <h2>仿微博登录</h2> <div class="detail"> <input type="text" placeholder='邮箱/会员账号/手机号' autocomplete='off'
JS实现提交表单前的数字及邮箱校检功能

个人觉得一个工程中让用户提交表单时,用户提交的数据类型及内容不确定度都很大,用户不一定会完全理解设计者意思.所以提交表单前的校检是必须的,这里简单分享几个校检方法,本人新手,还请多多指教. <script type="text/javascript"> function toVaild(){ var age = document.getElementById("age").value; var email = document.getElementByI
仿新浪微博登陆邮箱提示效果的js代码

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8
javascript仿百度输入框提示自动下拉补全

本文实例讲解了javascript输入框自动下拉补全操作,仿百度.谷歌搜索框提示,具体内容如下效果图: 具体代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="
javascript实现下拉提示选择框

本文介绍了select和sugget结合起来使用的例子,支持下拉的直接选择,也支持在下拉内容中输入过滤. 整体效果就是下面这样的: 1.首先需要引入如下文件 <link href="select2.min.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
JS仿百度自动下拉框模糊匹配提示

实际项目中,我们可以把数据获取改成ajax动态获取,在 getContent()中 <!DOCTYPE> <html> <head> <title>js/jQuery实现类似百度搜索功能</title> <meta name="Author" content="Michael"> <meta name="Keywords" content="js/jQuery
JavaScript实现邮箱地址自动匹配功能代码

自动匹配技术:简单的来说就是"根据用户输入的信息来提示一些相似项供用户选择".具有很广泛的应用,比如我们最常用的百度,当输入一些搜索内容后会自动匹配很多相关信息:再比如我们最常用的输入法,都是使用这种技术,当然这些都比较难了.下面这个例子是比较简单的我们常用邮箱的匹配.代码如下: 1.css代码 #match_email { margin-left:48px; overflow:auto; display:none; width:200px; border:1px solid #aaa

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

您可能感兴趣的文章:

相关推荐

随机推荐