JavaScript は電子メール アドレスの自動照合機能コードを実装します

自動マッチング技術: 簡単に言うと、「ユーザーが入力した情報に基づいて、類似したアイテムをいくつかユーザーに選択させる」ことを意味します。たとえば、最も一般的に使用されている Baidu は、いくつかの検索コンテンツを入力すると、多くの関連情報を自動的に照合します。もちろん、これらはすべてこのテクノロジーを使用しています。の方が難しいです。次の例は、一般的に使用される電子メール アドレスの比較的単純な一致です。コードは次のとおりです:

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 code

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

onkeyup 時間は、指がボタンから離れている限りトリガーされることを示します

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>

正規表現は、js のいくつかの場所で使用されます:
(1)keyword = keyword.match( /@w*[.]?w*/);@ を含む @ 以降のコンテンツのみを取得します
(2)varmatches = mailBoxs.match(new RegExp(keyword+"[^ ]* ",") gm")) ; マッチングを実行し、キーワードに一致するメールボックスを保存します。[^ ]* はスペースとのマッチングがないことを意味します。パラメーター「gm」の 'g' はグローバルマッチングを意味し、'm' はグローバルマッチングを意味します複数行のマッチング;
( 3)matches =matches.join("").replace(/ $/,"").split(" "); 文字列の末尾はスペースと一致し、$ は文字列の終わり。

2つの無名関数のうち、eはマウスクリックイベント発生時にシステムが自動生成・、e.targetはマウスでクリックされた現在のオブジェクトを取得する関数です。