<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script  type="text/javascript" src="http://s.juzheke.com/min/f=@public/js/jquery.v1.7.js"></script>
<script type="text/javascript">
$(function(){
    $.fn.extend({
		"changeTips":function(value){
			value = $.extend({
				divTip:""
			},value)
			
			var $this = $(this);
			var indexLi = 0;
			
			//点击document隐藏下拉层
			$(document).click(function(event){
				if($(event.target).attr("class") == value.divTip || $(event.target).is("li")){
					var liVal = $(event.target).text();
					$this.val(liVal);
					blus();
				}else{
					blus();
				}
			})
			
			//隐藏下拉层
			function blus(){
				$(value.divTip).hide();
			}
			
			//键盘上下执行的函数
			function keychang(up){
				if(up == "up"){
					if(indexLi == 1){
						indexLi = $(value.divTip).children().length-1;
					}else{
						indexLi--;
					}
				}else{
					if(indexLi ==  $(value.divTip).children().length-1){
						indexLi = 1;
					}else{
						indexLi++;
					}
				}
				$(value.divTip).children().eq(indexLi).addClass("active").siblings().removeClass();	
			}
			
			//值发生改变时
			function valChange(){
				var tex = $this.val();//输入框的值
				var fronts = "";//存放含有“@”之前的字符串
				var af = /@/;
				var regMail = new RegExp(tex.substring(tex.indexOf("@")));//有“@”之后的字符串,注意正则字面量方法，是不能用变量的。所以这里用的是new方式。


				//让提示层显示，并对里面的LI遍历
				if($this.val()==""){
					blus();
				}else{
					$(value.divTip).
					show().
					children().
					each(function(index) {
						var valAttr = $(this).attr("email");
						if(index==1){$(this).text(tex).addClass("active").siblings().removeClass();}
						//索引值大于1的LI元素进处处理
						if(index>1){
							//当输入的值有“@”的时候
							if(af.test(tex)){
								//如果含有“@”就截取输入框这个符号之前的字符串
								fronts = tex.substring(tex.indexOf("@"),0);
								$(this).text(fronts+valAttr);
								//判断输入的值“@”之后的值，是否含有和LI的email属性
								if(regMail.test($(this).attr("email"))){
									$(this).show();
								}else{
									if(index>1){
										$(this).hide();
									}	
								}
								
							}
							//当输入的值没有“@”的时候
							else{
								$(this).text(tex+valAttr);
							}
						}
	                })
				}	
			}
			
			
			//输入框值发生改变的时候执行函数，这里的事件用判断处理浏览器兼容性;
			if($.browser.msie){
				$(this).bind("propertychange",function(){
					valChange();
				})
			}else{
				$(this).bind("input",function(){
					valChange();
				})
			}
			

			//鼠标点击和悬停LI
			$(value.divTip).children().
			hover(function(){
				indexLi = $(this).index();//获取当前鼠标悬停时的LI索引值;
				if($(this).index()!=0){
					$(this).addClass("active").siblings().removeClass();
				}	
			})
					
		
			//按键盘的上下移动LI的背景色
			$this.keydown(function(event){
				if(event.which == 38){//向上
					keychang("up")
				}else if(event.which == 40){//向下
					keychang()
				}else if(event.which == 13){ //回车
					var liVal = $(value.divTip).children().eq(indexLi).text();
					$this.val(liVal);
					blus();
				}
			})				
		}	
	})	


	$("#loginName").changeTips({
		divTip:".on_changes"
	}); 
})
</script>
<style type="text/css">
*{margin:0;padding:0;}
	
.login{width:400px; margin:0 auto; background:#EBEBEB; position:relative;}

input{ width:230px; height:28px; margin:10px 0; line-height:28px;}
	
.login .on_changes{width:232px; position:absolute; top:40px; list-style:none; background:#FFF; border:1px solid #000; display:none; padding:10px;}

.login .on_changes li{margin:8px;padding:4px;}

.login .on_changes li.active{ background:#CEE7FF;}
	
</style>
</head>
<body>
	<div class="login">
		<div class="ln"><input type="text" maxlength="128" name="loginName" id="loginName" placeholder="邮箱/会员帐号/手机号" /></div>
		<ul class="on_changes">
			<li email="">请选择邮箱类型</li>
            <li email=""></li>
			<li email="@sina.com"></li>
			<li email="@163.com"></li>
			<li email="@qq.com"></li>
			<li email="@hotmail.com"></li>
			<li email="@126.com"></li>
			<li email="@gmail.com"></li>
			<li email="@yahoo.com"></li>
		</ul>
	</div>
</body>
</html>