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 相关文章推荐
YUI的Tab切换实现代码
Apr 11 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
js实现简单的验证码
Dec 25 Javascript
JS实现的几个常用算法
Nov 12 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
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变量范围介绍
2012/10/15 PHP
php文件缓存类汇总
2014/11/21 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
BootStrap 动态表单效果
2017/06/02 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
Python中property函数用法实例分析
2018/06/04 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
数字漫画:comiXology
2020/06/13 全球购物
造价工程师个人求职信
2013/09/21 职场文书
劳资人员岗位职责
2013/12/19 职场文书
毕业设计计划书
2014/01/09 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
合法的离婚协议书范本
2014/10/23 职场文书