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 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
vue之将echart封装为组件
Jun 02 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
详解vue-router导航守卫
Jan 19 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 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中的超全局变量
2006/10/09 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
在nodejs中创建child process的方法
2021/01/26 NodeJs
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
Python中使用动态变量名的方法
2014/05/06 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
应届大学生求职的自我评价
2013/11/17 职场文书
大学毕业通用个人的求职信
2013/12/08 职场文书
教师党性分析材料
2014/02/04 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫