我写的这一个例子,用的列表项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", ""); } }) }
样式根据实际情况自己调整
效果图: