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에서 오버플로를 자동으로 설정하고 최대 높이를 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 += &#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) 키워드 = 키워드.일치(/@w*[.]?w*/); 🎜> (2 ) var match = mailBoxs.match(new RegExp(keyword+"[^ ]* ","gm")); 일치하는 키워드를 mailBox에 저장합니다. [^ ]*는 일치하지 않는 공백을 나타냅니다. , 매개변수 "gm"의 'g'는 전역 일치를 나타내고 'm'은 여러 줄 일치를 나타냅니다.
(3) match = match.join("").replace(/ $/,"" ).split( " "); 문자열의 끝은 공백과 일치하며 $는 문자열의 끝을 나타냅니다.

두 가지 익명 함수 중 e는 마우스 클릭 이벤트가 발생할 때 시스템에 의해 자동으로 생성되며, e.target은 마우스로 클릭된 현재 객체를 얻는 것입니다.