jQuery 输入邮箱地址时自动提示　

[javascript]代码库

( function ( $ )
{
	$.fn.mailAutoComplete = function ( options )
	{
		var defaults =
		{
boxClass: "mailListBox", //外部box样式
listClass: "mailListDefault", //默认的列表样式
focusClass: "mailListFocus", //列表选样式中
markCalss: "mailListHlignt", //高亮样式
			zIndex: 1,
autoClass:
			true, //是否使用插件自带class样式
mailArr:
			["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"], //邮件数组
textHint:
			false, //文字提示的自动显示与隐藏
hintText: ""
			,
focusColor: "#333"
			,
blurColor: "#999"
		};
		var settings = $.extend ( {}, defaults, options || {} );

		//页面装载CSS样式
		if ( settings.autoClass && $ ( "#mailListAppendCss" ).size() === 0 )
		{
			$ ( '' ).appendTo ( $ ( "head" ) );
		}
		var cb = settings.boxClass, cl = settings.listClass, cf = settings.focusClass, cm = settings.markCalss; //插件的class变量
		var z = settings.zIndex, newArr = mailArr = settings.mailArr, hint = settings.textHint, text = settings.hintText, fc = settings.focusColor, bc = settings.blurColor;
		//创建邮件内部列表内容
		$.createHtml = function ( str, arr, cur )
		{
			var mailHtml = "";
			if ( $.isArray ( arr ) )
			{
				$.each ( arr, function ( i, n )
				{
					if ( i === cur )
					{
						mailHtml += '
						            '+str+'@'+arr[i]+'
						            ';
					}
					else
					{
						mailHtml += '
						            '+str+'@'+arr[i]+'
						            ';
					}
				} );
			}
			return mailHtml;
		};
		//一些全局变量
		var index = -1, s;
		$ ( this ).each ( function()
		{
			var that = $ ( this ), i = $ ( ".justForJs" ).size();
			if ( i > 0 )   //只绑定一个文本框
			{
				return;
			}
			var w = that.outerWidth(), h = that.outerHeight(); //获取当前对象（即文本框）的宽高
			//样式的初始化
			that.wrap ( '' )
			.before ( '
			          ' );
			var x = $ ( "#mailListBox_" + i ), liveValue; //列表框对象
			that.focus ( function()
			{
				//父标签的层级
				$ ( this ).css ( "color", fc ).parent().css ( "z-index", z );
				//提示文字的显示与隐藏
				if ( hint && text )
				{
					var focus_v = $.trim ( $ ( this ).val() );
					if ( focus_v === text )
					{
						$ ( this ).val ( "" );
					}
				}
				//键盘事件
				$ ( this ).keyup ( function ( e )
				{
					s = v = $.trim ( $ ( this ).val() );
					if ( /@/.test ( v ) )
					{
						s = v.replace ( /@.*/, "" );
					}
					if ( v.length > 0 )
					{
						//如果按键是上下键
						if ( e.keyCode === 38 )
						{
							//向上
							if ( index <= 0 )
							{
								index = newArr.length;
							}
							index--;
						}
						else if ( e.keyCode === 40 )
						{
							//向下
							if ( index >= newArr.length - 1 )
							{
								index = -1;
							}
							index++;
						}
						else if ( e.keyCode === 13 )
						{
							//回车
							if ( index > -1 && index < newArr.length )
							{
								//如果当前有激活列表
								$ ( this ).val ( $ ( "#mailList_"+index ).text() );
							}
						}
						else
						{
							if ( /@/.test ( v ) )
							{
								index = -1;
								//获得@后面的值
								//s = v.replace(/@.*/, "");
								//创建新匹配数组
								var site = v.replace ( /.*@/, "" );
								newArr = $.map ( mailArr, function ( n )
								{
									var reg = new RegExp ( site );
									if ( reg.test ( n ) )
									{
										return n;
									}
								} );
							}
							else
							{
								newArr = mailArr;
							}
						}
						x.html ( $.createHtml ( s, newArr, index ) ).css ( "left", 0 );
						if ( e.keyCode === 13 )
						{
							//回车
							if ( index > -1 && index < newArr.length )
							{
								//如果当前有激活列表
								x.css ( "left", "-6000px" );
							}
						}
					}
					else
					{
						x.css ( "left", "-6000px" );
					}
				} ).blur ( function()
				{
					if ( hint && text )
					{
						var blur_v = $.trim ( $ ( this ).val() );
						if ( blur_v === "" )
						{
							$ ( this ).val ( text );
						}
					}
					$ ( this ).css ( "color", bc ).unbind ( "keyup" ).parent().css ( "z-index",0 );
					x.css ( "left", "-6000px" );

				} );
				//鼠标经过列表项事件
				//鼠标经过
				$ ( ".mailHover" ).live ( "mouseover", function()
				{
					index = Number ( $ ( this ).attr ( "id" ).split ( "_" ) [1] );
					liveValue = $ ( "#mailList_"+index ).text();
					x.children ( "." + cf ).removeClass ( cf ).addClass ( cl );
					$ ( this ).addClass ( cf ).removeClass ( cl );
				} );
			} );
			x.bind ( "mousedown", function()
			{
				that.val ( liveValue );
			} );
		} );
	};

} ) ( jQuery );