JavaScript implementiert den Funktionscode für den automatischen E-Mail-Adressabgleich

Automatische Matching-Technologie: Vereinfacht ausgedrückt bedeutet dies, dass der Benutzer „auf der Grundlage der vom Benutzer eingegebenen Informationen einige ähnliche Elemente zur Auswahl auffordert“. Es gibt ein breites Anwendungsspektrum. Unser am häufigsten verwendetes Baidu gleicht nach der Eingabe einiger Suchinhalte automatisch viele relevante Informationen ab sind schwieriger. Das folgende Beispiel ist ein relativ einfacher Abgleich unserer häufig verwendeten E-Mail-Adressen. Der Code lautet wie folgt:

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

Setzen Sie den Überlauf in CSS auf „Auto“ und die maximale Höhe auf 100 Pixel. Wenn die Höhe des Div 100 Pixel überschreitet, wird dies der Fall sein automatisch generiert.

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-Zeit gibt an, dass es ausgelöst wird, solange der Finger die Taste verlässt

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>

in js werden an mehreren Stellen reguläre Ausdrücke verwendet:
(1) keyword = keyword.match(/@w*[.]?w*/); nur den Inhalt nach @ abrufen, einschließlich @ (2 ) var matches = mailBoxs.match(new RegExp(keyword+"[^ ]* ","gm")); Match, und speichern Sie die passenden Schlüsselwörter in MailBoxen in Übereinstimmungen [^ ]* bezieht sich auf nicht übereinstimmende Leerzeichen. , „g“ im Parameter „gm“ bezieht sich auf globales Matching und „m“ auf mehrzeiliges Matching; ).split( " "); Das Ende der Zeichenfolge wird mit einem Leerzeichen abgeglichen, und $ stellt das Ende der Zeichenfolge dar.

Unter den beiden anonymen Funktionen wird e automatisch vom System generiert, wenn das Mausklickereignis auftritt, und e.target besteht darin, das aktuelle Objekt abzurufen, auf das mit der Maus geklickt wird.