Js实现邮箱自动匹配以及上下键选择

我写的这一个例子，用的列表项li加js实现：

具体思路：监控邮箱输入框的keydown，当输入值时，进行判断以及格式验证，并将输入的值与已有邮箱后缀列表组合成选择项，用innerHtml或则html（）填充到li下面。键盘的上下键选择，监控某一区域的键盘事件，如果当前输入框或者邮箱列表为活动状态，则按照按下的键及次数为列表中选择项获取焦点。表达不是很好，具体看下编代码：

示例：

<ul>

   <li>注册邮箱 @Html.TextBoxFor(m => m.Email, new { @class = "register_center_zc"}) <span class="allSpan">*</span>@Html.Vali       dationMessageFor(m => m.Email) </li>
  <li id="email" class="email" style="border: 1px groove #C0C0C0; position:absolute; height:auto; width:203px; background-color:White    ; display:none; margin-top:-17px; margin-left:63px; text-align:left; line-height:20px;"></li>

</ul>

Js代码：

 var sumSpan = 0;
 var sumKey = -1;
 $(document).ready(function () {
 
 
     $("input#Email").keydown(function () {
         keypresses(event);
     })
     $("input#Email").keyup(function () {
         sumKey = -1;
         sumSpan = 0;
         var Emails = { 0: '@qq.com', 1: '@126.com', 2: '@163.com', 3: '@139.com', 4: '@sohu.com', 5: '@sina.com', 6: '@sina.cn', 7:         '@gmail.com', 8: '@hotmail.com', 9: '@yahoo.com.cn' }
         var emailval = jQuery.trim($("input#Email").attr("value"));
         var startStr = "";
         var endStr = "";
         if (emailval != "") {
             $("li#email").show();
         }
         else {
             document.getElementById("email").style.display = "none";
             return false;
         }
         var emailindex = emailval.indexOf("@");
         if (emailindex < 0) {
             startStr = emailval.substring(emailindex);
             endStr = "";
         }
         else {
             startStr = emailval.substring(0, emailindex);
             endStr = emailval.substring(emailindex);
         }
         var reg = /.*[\u4e00-\u9fa5]+.*$/;
         if (reg.test(startStr)) {
             alert("邮箱不可输入汉字！");
             return false;
         }
         var html = "";
         for (var i = 0; i < 10; i++) {
             if (Emails[i].indexOf(endStr) >= 0) {
                 ++sumSpan;
                 html = html + "<span name=\"123\" style=\"float:left; margin-left:-50px; cursor:pointer;\">" + startStr + Emails[i] + "</span></br>";
             }
         }
         if (html != "") {
             html = html + "<span name=\"123\" style=\"float:left; margin-left:-50px; cursor:pointer;\">" + "隐藏匹配邮箱列表" + "</span></br>";
             document.getElementById("email").innerHTML = html;
         }
         else {
             sumSpan = 0;
             sumKey = -1;
             document.getElementById("email").style.display = "none";
         }
 
         $("li#email span[name='123']").each(function (i, val) {
             $(this).click(function () {
                 if (navigator.appName.indexOf('Netscape') != -1) {
                     if (val.textContent == "隐藏匹配邮箱列表") {
                         sumKey = -1; sumSpan = 0;
                         document.getElementById("email").style.display = "none";
                     }
                     else {
                         $("input#Email").attr("value", val.textContent);
                         window.document.getElementById("Email").focus();
                         window.document.getElementById("Email").blur();
                     }
                 } else {
                     if (val.innerText == "隐藏匹配邮箱列表") {
                         sumKey = -1; sumSpan = 0;
                         document.getElementById("email").style.display = "none";
                     }
                     else {
                         $("input#Email").attr("value", val.innerText);
                         window.document.getElementById("Email").focus();
                         window.document.getElementById("Email").blur();
                     }
                 }
                 sumKey = -1; sumSpan = 0;
                 document.getElementById("email").style.display = "none";
             });
             $(this).mouseover(function () {
                 var spans = document.getElementsByName("123");
                 spans[i].style.backgroundColor = "#CCCCCC";
             });
             $(this).mouseout(function () {
                 var spans = document.getElementsByName("123");
                 spans[i].style.backgroundColor = "";
             });
 
         });
     });
 
 });
 function keypresses(event) {
     var event = event || window.event;
     switch (event.keyCode) {
         case 38: //上键
             if (sumKey == 0) {
                 $("input#Email").focus(); //以下方法只适合于IE
                 var tex = ("input#Email").attr("value");
                 var settext = document.getElementById("Email");
                 var r = settext.createTextRange();
                 r.collapse(true);
                 r.moveStart('character', tex.length);
                 r.select();
             }
             else {
                 sumKey = (sumKey - 1) % sumSpan;
                 movefocus();
                 return false;
             }
 
             break;
         case 40:
             sumKey = (sumKey + 1) % sumSpan;
             movefocus();
             return false;
             break;
 
     }
 }
 function movefocus() {
     $("li#email span[name='123']").each(function (i, val) {
         if (i == sumKey) {
             $(this).attr("tabindex", 0);
             $(this).focus();
             $(this).keydown(function () {
                 document.onkeydown = function (event) {
                     var event = event || window.event;
                     switch (event.keyCode) {
                         case 13:
                             $("input#Email").attr("value", val.textContent);
                             window.document.getElementById("Email").focus();
                             window.document.getElementById("Email").blur();
                             sumKey = -1; sumSpan = 0;
                             document.getElementById("email").style.display = "none";
                             break;
                         case 38:
                             keypresses(event);
                             return false;
                             break;
                         case 40:
                             keypresses(event);
                             return false;
                             break;
                         default:
                             keypresses(event);
                             break;
                     }
                 }
 
             });
             $(this).css("backgroundColor", "#CCCCCC");
         }
         else {
             $(this).css("backgroundColor", "");
         }
     })
 }

样式根据实际情况自己调整

效果图：