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 相关文章推荐
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
浅析javascript的return语句
Dec 15 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
JS通用方法触发点击事件代码实例
Feb 17 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 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对称加密函数实现数据的加密解密
2016/10/27 PHP
cakephp常见知识点汇总
2017/02/24 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
php中上传文件的的解决方案
2018/09/25 PHP
JavaScript静态的动态
2006/09/18 Javascript
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
python 写的一个爬虫程序源码
2016/02/28 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
python中subprocess批量执行linux命令
2018/04/27 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
python模块导入的方法
2019/10/24 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
zooplus波兰:在线宠物店
2019/07/21 全球购物
借条如何写
2015/05/26 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
MySQL创建管理子分区
2022/04/13 MySQL