时间:2021-05-26
本文实例讲述了jQuery实现Email邮箱地址自动补全功能代码。分享给大家供大家参考,具体如下:
jQuery Email邮箱地址自动补全代码,输入Email时,会自动加入@符号,在输入框中输入“qq”、“Sina”、“163”等等可以看到效果;鼠标经过提示Email时,高亮该条Email,鼠标点击Email时,文本框内容替换成该条Email,并删除提示层.
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-email-auto-comp-codes/
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://"); totalid = emailvar.length; var emailmy = "<div class='newemail' style='width:170px; color:#6B6B6B; overflow:hidden;'><font color='#D33022'>" + press + "</font></div>"; if(!(isEmail(press))){ for(var i=0; i<emailvar.length; i++) { emailtxt = emailtxt + "<div class='newemail' style='width:170px; color:#6B6B6B; overflow:hidden;'><font color='#D33022'>" + press + "</font>" + emailvar[i] + "</div>" } } else { emailbefor = press.split("@")[0]; emailafter = "@" + press.split("@")[1]; for(var i=0; i<emailvar.length; i++) { var theemail = emailvar[i]; if(theemail.indexOf(emailafter) == 0) { emailtxt = emailtxt + "<div class='newemail' style='width:170px; color:#6B6B6B; overflow:hidden;'><font color='#D33022'>" + emailbefor + "</font>" + emailvar[i] + "</div>" } } } $("#myemail").html(emailmy+emailtxt); if($("#myemail").html()){ $("#myemail").css("display","block"); $(".newemail").css("width",$("#myemail").width()); can1press = true; } else { $("#myemail").css("display","none"); can1press = false; } beforepress = press; } if (press=="" || press==null){ $("#myemail").html(""); $("#myemail").css("display","none"); } }) $(document).click(function(){ //文本框失焦时删除层 if(can1press){ $("#myemail").remove(); can1press = false; if($("#me").focus()){ can1press = false; } } }) $(".newemail").live("mouseover",function(){ //鼠标经过提示Email时,高亮该条Email $(".newemail").css("background","#FFF"); $(this).css("background","#CACACA"); $(this).focus(); nowid = $(this).index(); }).live("click",function(){ //鼠标点击Email时,文本框内容替换成该条Email,并删除提示层 var newhtml = $(this).html(); newhtml = newhtml.replace(/<.*?>/g,""); $("#me").val(newhtml); $("#myemail").remove(); }) $(document).bind("keydown",function(e) { if(can1press){ switch(e.which) { case 38: if (nowid > 0){ $(".newemail").css("background","#FFF"); $(".newemail").eq(nowid).prev().css("background","#CACACA").focus(); nowid = nowid-1; } if(!nowid){ nowid = 0; $(".newemail").css("background","#FFF"); $(".newemail").eq(nowid).css("background","#CACACA"); $(".newemail").eq(nowid).focus(); } break; case 40: if (nowid < totalid){ $(".newemail").css("background","#FFF"); $(".newemail").eq(nowid).next().css("background","#CACACA").focus(); nowid = nowid+1; } if(!nowid){ nowid = 0; $(".newemail").css("background","#FFF"); $(".newemail").eq(nowid).css("background","#CACACA"); $(".newemail").eq(nowid).focus(); } break; case 13: var newhtml = $(".newemail").eq(nowid).html(); newhtml = newhtml.replace(/<.*?>/g,""); $("#me").val(newhtml); $("#myemail").remove(); } } })}) //检查email邮箱function isEmail(str){ if(str.indexOf("@") > 0) { return true; } else { return false; }}</script>在输入框中输入“qq”、“Sina”、“163”等等可以看到效果</body></html>希望本文所述对大家jQuery程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了基于jquery实现的自动补全功能的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:$(function(){//自动补全varm
邮箱地址验证正则表达式dedecms中的邮箱地址验证复制代码代码如下:经测试a@jb51.net这样的邮箱CheckEmail不支持但is_email支持,但对
使用input+datalist实现自动补全功能,其中datalist中的内容是根据input输入的内容动态变换的,代码如下functioninputSelec
邮箱地址验证有很多方法。在浏览器端,js邮箱验证可以通过正则表达式检测。比如:复制代码代码如下:functionisEmail(email){return/^(
前台:Html页面JS//自动补全功能$("#clsydw").combobox({valueField:'syr',textField:'syr',panel