JavaScript实现邮箱地址自动匹配功能代码


Posted in Javascript onNovember 28, 2016

自动匹配技术:简单的来说就是“根据用户输入的信息来提示一些相似项供用户选择”。具有很广泛的应用,比如我们最常用的百度,当输入一些搜索内容后会自动匹配很多相关信息;再比如我们最常用的输入法,都是使用这种技术,当然这些都比较难了。下面这个例子是比较简单的我们常用邮箱的匹配。代码如下:

1.css代码

#match_email
  {
    margin-left:48px;
    overflow:auto; 
    display:none;
    width:200px;
    border:1px solid #aaa;
    background:#fff;
    max-height:100px;
    line-height:20px;
  }

  #match_email div
  {
    text-decoration:none;
    color:#000;
    width:200px;
  }

  #match_email div:hover
  {
    background:#aaa;  
  }

  input
  {
    height:20px;  
    width:200px;
  }

在css中将overflow设为auto以及将max-height设为100px表示,在该div高度超多100px就是自动生成滚动条。

2.html代码

<div>
  邮箱:<input type="text" name="email" id="email" autocomplete="off" onkeyup="match_mail(this.value)"/>
  <div id="match_email"></div>

</div>

onkeyup时间表示只要手指离开按钮就会触发

3.js代码

<script>
  //mailBoxs里存储用来匹配的串
  var mailBoxs = "@163.com @126.com @129.com"
  mailBoxs += " @qq.com @vip.qq.com @foxmail.com @live.cn @hotmail.com @sina.com @sina.cn @vip.sina.com";
  var matchmail = document.getElementById("match_email");
  var email = document.getElementById("email");
  function match_mail(keyword)
  {
    matchmail.innerHTML = "";
    matchmail.style.display = "none";
    if (!keyword)
      return;
    if (!keyword.match(/^[\w\.\-]+@\w*[\.]?\w*/))  
      return;
    keyword = keyword.match(/@\w*[\.]?\w*/);
    var matchs = mailBoxs.match(new RegExp(keyword+"[^ ]* ","gm"));
    if (matchs)
    {
      matchs = matchs.join("").replace(/ $/,"").split(" ");
      matchmail.style.display = "block";
      for (var i = 0; i < matchs.length; i++)
      {
        matchmail.innerHTML += '<div>'+matchs[i]+'</div>'; 
      }  
    }
  }
  //点击除了匹配框之外的任何地方,匹配框消失
  document.onclick = function(e)
  {
    var target = e.target;
    if (target.id != "matchmail")
      matchmail.style.display = "none";  
  }
  //将匹配框上鼠标所点的字符放入输入框
  matchmail.onclick = function(e)
  {
    var target = e.target;
    email.value = email.value.replace(/@.*/,target.innerHTML);
  }
</script>

在js中好几处都用到了正则表达式:
(1)keyword = keyword.match(/@\w*[\.]?\w*/);只获取@后面的内容,包括@;
(2)var matchs = mailBoxs.match(new RegExp(keyword+"[^ ]* ","gm"));进行匹配,把mailBoxs中和keyword匹配的存入matchs中,[^ ]* 指遇到空格不匹配,参数”gm”中'g'指进行全局匹配,'m'指多行匹配;
(3)matchs = matchs.join("").replace(/ $/,"").split(" ");字符串的结尾用空格匹配,$表示字符串的结尾。

在两个匿名函数中,e是在鼠标点击事件发生时系统自动生成的·,e.target是获得鼠标所点的当前对象。

最终效果如图:

JavaScript实现邮箱地址自动匹配功能代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
小程序中this.setData的使用和注意事项
Aug 28 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 #Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 #Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 #Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 #Javascript
js实现右键菜单功能
Nov 28 #Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 #Javascript
详解JS-- 浮点数运算处理
Nov 28 #Javascript
You might like
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
php编程每天必学之验证码
2016/03/03 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
Python中的True,False条件判断实例分析
2015/01/12 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
使用Python实现批量ping操作方法
2020/05/06 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
酒店管理专业毕业生推荐信
2013/11/10 职场文书
合作投资意向书
2014/04/01 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
离婚协议书的范本
2015/01/27 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
Go web入门Go pongo2模板引擎
2022/05/20 Golang