JavaScript implements automatic email address matching function code

Automatic matching technology: Simply put, it means "prompt some similar items for the user to choose based on the information entered by the user." It has a wide range of applications. For example, our most commonly used Baidu will automatically match a lot of relevant information after entering some search content. Another example is our most commonly used input methods, which all use this technology. Of course, these are more difficult. The following example is a relatively simple match of our commonly used email addresses. The code is as follows:

1.css code

#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;
}

Set overflow to auto and max-height to 100px in the css. If the div height exceeds 100px, the scroll bar will be automatically generated.

2.html code

<div>
  邮箱：<input type="text" name="email" id="email" autocomplete="off" onkeyup="match_mail(this.value)"/>
  <div id="match_email"></div>
 
</div>

onkeyup time indicates that it will be triggered as long as the finger leaves the button

3.js code

<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 += &#39;<div>&#39;+matchs[i]+&#39;</div>&#39;; 
      }  
    }
  }
  //点击除了匹配框之外的任何地方，匹配框消失
  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>

Regular expressions are used in several places in js:
(1)keyword = keyword.match( /@w*[.]?w*/);Only get the content after @, including @;
(2)var matches = mailBoxs.match(new RegExp(keyword+"[^ ]* ","gm")) ; Perform matching and store the mailBoxes that match the keyword in matches. [^ ]* means that there is no matching with spaces. The 'g' in the parameter "gm" means global matching, and 'm' means multi-line matching;
（ 3) matches = matches.join("").replace(/ $/,"").split(" "); The end of the string is matched with a space, and $ represents the end of the string.

Among the two anonymous functions, e is automatically generated by the system when the mouse click event occurs·, and e.target is to obtain the current object clicked by the mouse.