邮箱自动补充

引用：

$(\"#loginName\").changeTips({
	divTip:\".on_changes\"
}); 

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;}

html：

<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>

js导入

(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();
				}
			})				
		}	
	})	
})(jQuery)