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 replace 字符替换实现代码
Dec 02 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
搞定immutable.js详细说明
May 02 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
vue项目,代码提交至码云,iconfont的用法说明
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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
Laravel日志用法详解
2016/10/09 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
Exjs 入门篇
2010/04/07 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
python 类详解及简单实例
2017/03/24 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
关于python 跨域处理方式详解
2020/03/28 Python
Python中SQLite如何使用
2020/05/27 Python
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
幼儿园大班新学期寄语
2014/01/18 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
电子商务专业求职信
2014/03/08 职场文书
员工合理化建议书
2014/05/19 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
Python标准库之typing的用法(类型标注)
2021/06/02 Python