邮件下拉列表

  $(document).ready(function() {
	  
	        var f = {};
	           // 计数
	           f.i = 0;
	           f._searchEmail = function(email) {
	               var emailHost = ['qq.com', '163.com', '126.com', 'sina.com', 'yahoo.com.cn', 'hotmail.com','gmail.com', 'sohu.com'];
	               var index = [];
	               var start = email.indexOf('@');
	               if (start == -1) {
	                   return emailHost;
	               }
	               var substr = email.substr(start+1);
	               if (!substr) {
	                   return emailHost;
	               }

	               for (var i = 0; i < emailHost.length; i++) {
	                   var str = emailHost[i].substr(0, len);
	                   if (str == substr) {
	                       index.push(emailHost[i]);
	                   }
	               }
	               return index;
	           }
	           
	           f._downList = function(t) {
	               t.live('keyup', function(e){
	                   var str = '';
	                   var emailUl = $('.ats-email-ul');
	                   var numb = emailUl.children('li').length;
	                   var emailVal = t.val();
	                   if (emailVal.indexOf('@') != -1) {
	                       var prefix = emailVal.substr(0, emailVal.indexOf('@'));
	                   } else {
	                       var prefix = emailVal;
	                   }
	                   if (!prefix) return true;
	                   var code = e.keyCode || e.wich;
	                   
	                   // 下
	                   if (code == 40) {
	                       if (f.i >= numb) {
	                           f.i = 0;
	                       }
	                       $('.ats-email-ul li').children('a').removeClass('ats-email-li-a');
	                       $('.ats-email-ul li').eq(f.i).children('a').addClass('ats-email-li-a');
	                       f.i = f.i + 1;
	                       return true;
	                   }
	                   
	                   //  上
	                   if (code == 38) {
	                       if (f.i <= 0) {
	                           f.i = numb;
	                       }
	                       $('.ats-email-ul li').children('a').removeClass('ats-email-li-a');
	                       $('.ats-email-ul li').eq(f.i).children('a').addClass('ats-email-li-a');
	                       f.i = f.i - 1;
	                       return true;
	                   }
	                   
	                   // 回车
	                   if (code == 13 || code == 9) {
	                       t.val($('.ats-email-li-a').html());
	                       $('.ats-email-ul').hide();
	                       return false;
	                   }
	                   var arr = f._searchEmail(emailVal);
	                   for (var i = 0; i < arr.length; i++) {
	                       str += '<li><a class="e-li-a" href="javascript:void(0)">'+prefix+'@'+arr[i]+'</a></li>';
	                   }
	                   if (str)  emailUl.html(str).show();
	               })
	           }
	           
	           // 鼠标点击下拉列表，选中操作
	           f._list = function(obj, des) {
	               obj.live('click', function(){
	                   des.val($(this).html());
	                   $('.ats-email-ul').hide();
	               })
	           }
	           
	           // 绑定document事件
	           f._other = function(obj) {
	               $(document).bind('click', function(e) {
	                   var s=e.target || e.srcElement;
	                   var id = $(s).attr('id');
	                   console.log(obj.attr('id'));
	                   if (id == obj.attr('id')) {
	                       return true;
	                   }
	                   if (!$(s).is('.ats-email-ul')) {
	                       $('.ats-email-ul').hide();
	                   }

	               })
	           }
	           f.showEmailList = function() {
	               var obj =  $('.e-li-a');
	               var des = $('#email');
	               $(des).attr("autocomplete","off");
	               f._downList(des);
	               f._list(obj, des);
	               f._other(des);
	           }
	           
	           f.showEmailList();
	 
	           /*
	           css:
	        	   .ats-list-all{ position:relative;}
	        	   ul.ats-email{ display:none; width:200px; height:auto; background:#fff; border:1px solid #ccc; position:absolute; top:24px; left:5px; z-index:103;}
	        	   ul.ats-email li{ width:100%; height:auto;}
	        	   ul.ats-email li a{ display:block; width:100%; height:24px; line-height:24px; text-indent:5px; color:#333; text-decoration:none;}
	        	   ul.ats-email li a:hover,ul.ats-email-ul li a.ats-email-li-a{ background:#EEE;}

	           html  
		           <div class="ats-list-all">
					<input type="text" id="email" class="form-input1" name="insured.email" value="">
					    <ul class="ats-email email-ul  ats-email-ul" id="email-ul">
					    </ul>
					</div>
	           
	           */
	 });