jquery实现文本框Email自动提示后缀

最近因为项目需要，需要一个会自动提示Email后缀的文本框，在网络上面找了一些资料，把自己觉得比较好的记录下来，备后面不时之需：直接上代码

首先是页面代码:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta   http-equiv= "Pragma"   content= "no-cache" /> 
<meta   http-equiv= "Cache-Control"   content= "no-cache" /> 
<meta   http-equiv= "Expires"   content= "0" /> 
<title>输入Email相关字符自动提示Email地址</title>
<script src="js/jquery-1.7.2.min.js" language="javascript" type="text/javascript"></script>
<script src="js/email.js" language="javascript" type="text/javascript"></script>
<style type="text/css">
body
{
    margin:0px;
    padding:0px;
    font-family:Arial;
    font-size:12px;
    padding:10px;
}
#myemail, .newemail, .newemailtitle{    
    cursor:default;
    line-height:18px;
}
</style>
<script type="text/javascript">
	function tt(){
		$("#rr").show();
	}
	 
</script>
</head>
<body>
<form action="index.jsp" method="post">
<div style="display: block" id="rr">
Email 在输入框中输入内容等等可以看到效果：(autocomplete="off"是阻止浏览器记录历史)
<input id="me" name="email" type="text" value="" placeholder="输入邮箱/昵称"style="width:150px; height:18px; line-height:18px; border:1px solid #999;"  autocomplete="off">
<input type="hidden" value="">
<input type="submit" value="submit" onclick="">
</div>
</form>
<input type="button" value="click" onclick="tt();">
</body>
</html>

再来js代码:

var nowid;
var totalid;
var can1press = false;
var emailafter;
var emailbefor;
$(document).ready(function(){   
    $("#me").focus(function(){ //文本框获得焦点，插入Email提示层
        $("#myemail").remove();
    $(this).after("<div id='myemail' style='width:170px; height:auto; background:#fff; color:#6B6B6B; position:absolute; left:"+$(this).get(0).offsetLeft+"px; top:"+($(this).get(0).offsetTop+$(this).height()+2)+"px; border:1px solid #ccc;z-index:5px; '></div>");
        if($("#myemail").html()){
             $("#myemail").css("display","block");
    $(".newemail").css("width",$("#myemail").width());
        can1press = true;
        } else {
             $("#myemail").css("display","none");
        can1press = false;
        }       
    }).keyup(function(){ //文本框输入文字时，显示Email提示层和常用Email
        var press = $("#me").val();
        if (press!="" || press!=null){
        var emailtxt = "";          
        var emailvar = new Array("@163.com","@126.com","@yahoo.com","@qq.com","@sina.com","@gmail.com","@hotmail.com","@foxmail.com");
        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;        
                }else 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;
    }
}

再来运行后的结果:

ok！完成,不过这个还是有些问题的，比如按上下键选择时，选中行的颜色显示有问题，鼠标选择的时候不会有问题，我这主要用在手机端，主要是触点选择，所以可以避免上下键选择时的问题。复制到本地后有兴趣的可以自己修改其中的bug