jQuery实现的邮箱自动补全功能

编辑：007 时间：2015-10-14

<!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>
<title>jQuery实现的邮箱自动补全功能</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;*top:22px;}
.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">
        <!--<p></p>-->
      </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">
		$(function(){  
			var mailList = new Array(@163.com,@126.com,@hotmail.com);
			$("#email").bind("keyup",function(){
				var val = $(this).val();
				if(val ==  || val.indexOf("@")>-1){
					$(".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>);
				}
				$(.emaillist).show();
				$(.emaillist li).click(function(){
					$(#email).val($(this).text());
					$(.emaillist).hide();
				})	
			})			
		})
	</script>
<br>
<p><a href="http://www.rongsoft.cn">烟台荣华软件科技有限公司</a> - 最专业的多商户商城系统开发！</p>
</body>
</html>

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：一个特别好用的搜索框必须考虑的五个方面

下一篇：非常流畅的绿色滑动门

回复列表

jQuery实现的邮箱自动补全功能

400-692-8081