js、jquery实现输入邮箱名自动显示邮箱地址后缀下拉菜单

  • 内容
  • 评论
  • 相关

这里给出一个简单的小实例,没设计太多逻辑,只不过用了几个事件而已,更加完善的东西可以自行修改斟酌:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
body{font-size:12px;}
body,ul,li,form,p,input{padding:0;margin:0;}
li,ul{list-style-type:none;}
li{line-height:20px;}
li:hover{background:#F1F3FE;}
form div{line-height:30px;}
.loginform{width:345px;margin-left:20px;}
.inputbg{line-height:22px;border:1px solid #dcdcdc;height:22px;width:200px;}
.loginform label{width:140px;display:block;float:left;}
.clear{clear:both;height:0;overflow:hidden;}
.inputposition{position:relative;}
.emaillist{position:absolute;width:200px;left:140px;border:1px solid #dcdcdc;background:#fff;display:none;}
.emaillist p{background:#EEEEEE;line-height:20px;}
</style>
</head>

<body>

<form class="loginform">
   <div class="inputposition"><label>Email Address:</label><input type="text" id="email" value="" class="inputbg"/>
     <ul class="emaillist">
      </ul>
   </div>
   <div class="clear"></div>
   <div><label>password:</label><input type="text" class="inputbg"/></div>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<!--<script type="text/javascript" src="jquery.js"></script>-->
<script type="text/javascript">
$(function(){  
    var mailList = new Array('@163.com','@126.com','@hotmail.com');
    $("#email").bind("keyup",function(){
        if($(this).val() == ''){
            $(".emaillist").hide();
            return false;
        }
    
        $('.emaillist').empty();
        for(var i = 0;i<mailList.length;i++){
            var emailText = $(this).val();
            $('.emaillist').append('<li class=addr>'+emailText+mailList[i]+'</li>');
        }
        $('.addr').bind('click',function(){
            console.info($(this).html());
            $('#email').val($(this).html());
            $(".emaillist").hide();
        });
        $('.emaillist').show();
    })		
})
</script>
</body>
</html>

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注