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 相关文章推荐
html下载本地
Jun 19 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
把PHP安装为Apache DSO
2006/10/09 PHP
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
php 远程关机操作的代码
2008/12/05 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
PHP中strtotime函数使用方法分享
2012/01/10 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
Maps Javascript
2007/01/22 Javascript
分页栏的web标准实现
2011/11/01 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
搞笑车尾标语
2014/06/23 职场文书
学校交通安全责任书
2014/08/25 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
慰问信模板
2015/02/14 职场文书
Golang中异常处理机制详解
2021/06/08 Golang
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
Python内置的数据类型及使用方法
2022/04/13 Python