这里给出一个简单的小实例，没设计太多逻辑，只不过用了几个事件而已，更加完善的东西可以自行修改斟酌：[html]
<!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>[/html]