<abbr id="4va6n"></abbr>
<abbr id="4va6n"></abbr>
      • <tfoot id="4va6n"><span id="4va6n"></span></tfoot>
      \r\n  \r\n        姓名：\r\n        郵箱：\r\n  <\/form>\r\n <\/body>\r\n<\/html><\/pre>
         <\/p>
      <\/p>
       JS代碼：js\/emailAutoComple.js（實現(xiàn)自動補全的關鍵代碼）<\/p>
      jQuery.AutoComplete = function(selector){\r\n  var elt = $(selector);\r\n  var strHtml = ''+\r\n        '    '+\r\n        '      <\/li>'+\r\n        '      <\/li>'+\r\n        '      <\/li>'+\r\n        '      <\/li>'+\r\n        '      <\/li>'+\r\n        '      <\/li>'+\r\n        '      <\/li>'+\r\n        '      <\/li>'+\r\n        '      <\/li>'+\r\n        '      <\/li>'+\r\n        '      <\/li>'+\r\n        '      <\/li>'+\r\n        '      <\/li>'+\r\n        '      <\/li>'+\r\n        '      <\/li>'+\r\n        '      <\/li>'+\r\n        '    <\/ul>'+\r\n        '  <\/div>';\r\n  \/\/將div追加到body上\r\n  $('body').append(strHtml);    \r\n  var autoComplete,autoLi;\r\n  autoComplete = $('#AutoComplete');   \r\n  autoComplete.data('elt',elt);\r\n  autoLi = autoComplete.find('li');\r\n  autoLi.mouseover(function(){\r\n    $(this).siblings().filter('.hover').removeClass('hover');\r\n    $(this).addClass('hover');\r\n  }).mouseout(function(){\r\n    $(this).removeClass('hover');\r\n  }).mousedown(function(){\r\n    autoComplete.data('elt').val($(this).text()).change();\r\n    autoComplete.hide();\r\n  });\r\n  \/\/用戶名補全+翻動\r\n  elt.keyup(function(e){\r\n    if(\/13|38|40|116\/.test(e.keyCode) || this.value==''){\r\n      return false;\r\n    }\r\n    var username = this.value;\r\n    if(username.indexOf('@')==-1){\r\n      autoComplete.hide();\r\n      return false;\r\n    }\r\n    autoLi.each(function(){\r\n      this.innerHTML = username.replace(\/\\@+.*\/,'')+$(this).attr('hz');\r\n      if(this.innerHTML.indexOf(username)>=0){\r\n        $(this).show();\r\n      }else{\r\n        $(this).hide(); \r\n      }\r\n    }).filter('.hover').removeClass('hover');\r\n    autoComplete.show().css({\r\n      left : $(this).offset().left,\r\n      top : $(this).offset().top + $(this).outerHeight(true) - 1,\r\n      position: 'absolute',\r\n      zIndex: '99999'\r\n    });\r\n    if(autoLi.filter(':visible').length==0){\r\n      autoComplete.hide();\r\n    }else{\r\n      autoLi.filter(':visible').eq(0).addClass('hover');     \r\n    }\r\n  }).keydown(function(e){\r\n    if(e.keyCode==38){ \/\/上\r\n      autoLi.filter('.hover').prev().not('.AutoComplete_title').addClass('hover').next().removeClass('hover');\r\n    }else if(e.keyCode==40){ \/\/下\r\n      autoLi.filter('.hover').next().addClass('hover').prev().removeClass('hover');\r\n    }else if(e.keyCode==13){ \/\/確定\r\n      autoLi.filter('.hover').mousedown();\r\n    }\r\n  }).focus(function(){\r\n    autoComplete.data('elt',$(this));\r\n  }).blur(function(){\r\n    autoComplete.hide();\r\n  });\r\n};<\/pre>
         <\/p>
      <\/p>
      CSS代碼：css\/emailAutoComple.css<\/p>
      #AutoComplete{background:#fff;border:1px solid #4190db;display:none;width:150px;}\r\n#AutoComplete ul{list-style-type:none;margin:0;padding:0;}\r\n#AutoComplete li{color:#333;cursor:pointer;font:12px\/22px \\5b8b\\4f53;text-indent:5px;}\r\n#AutoComplete .hover{background:#6eb6fe;color:#fff;}<\/pre>
      ? ?<\/p>\n
      <\/p>\n
      效果圖：<\/p>\n
      \"20161114114050736.jpg\"<\/p>"}	
	







      亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱
      
	

      
    

      

	
	
      
		
      
			
      
							
      
					
      
						首頁
						
												php教程
						
												PHP開發(fā)
						
						jquery css實現(xiàn)郵箱自動補全
					
      
					
					
      
						
      
							
      jquery css實現(xiàn)郵箱自動補全
      
							
							Dec 07, 2016 am	 09:54 AM
														
						
      
					
      
					
      
					
      
						
      
						
						
						

					
      ?今天在公司做一個電子商務網(wǎng)站的注冊會員時，要求用戶在電子郵箱文本框中輸入時，給與熱點提示常用的電子郵箱，幫助用戶選擇，提高體驗效果。下面是用Jquery+css實現(xiàn)的郵箱自動補全，供大家參考和學習。
      

      HTML代碼：emailAutoComple.html
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>郵箱自動補全</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link type="text/css" rel="stylesheet" href="css/emailAutoComple.css">
  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="js/emailAutoComple.js"></script>
  <script type="text/javascript">
    $(function(){
    $.AutoComplete("#email");  //（要補全文本框的id）
    });
  </script>
 </head>
  
 <body>
  <form action="">
        姓名：<input type="text" name="userName" id="userName"/><br/>
        郵箱：<input type="text" name="email" id="email"/>
  </form>
 </body>
</html>
         
       JS代碼：js/emailAutoComple.js（實現(xiàn)自動補全的關鍵代碼）
      jQuery.AutoComplete = function(selector){
  var elt = $(selector);
  var strHtml = &#39;<div class="AutoComplete" id="AutoComplete">&#39;+
        &#39;    <ul class="AutoComplete_ul">&#39;+
        &#39;      <li hz="@163.com"></li>&#39;+
        &#39;      <li hz="@126.com"></li>&#39;+
        &#39;      <li hz="@139.com"></li>&#39;+
        &#39;      <li hz="@189.com"></li>&#39;+
        &#39;      <li hz="@qq.com"></li>&#39;+
        &#39;      <li hz="@vip.sina.com"></li>&#39;+
        &#39;      <li hz="@sina.cn"></li>&#39;+
        &#39;      <li hz="@sina.com"></li>&#39;+
        &#39;      <li hz="@sohu.com"></li>&#39;+
        &#39;      <li hz="@hotmail.com"></li>&#39;+
        &#39;      <li hz="@gmail.com"></li>&#39;+
        &#39;      <li hz="@wo.com.cn"></li>&#39;+
        &#39;      <li hz="@21cn.com"></li>&#39;+
        &#39;      <li hz="@aliyun.com"></li>&#39;+
        &#39;      <li hz="@yahoo.com"></li>&#39;+
        &#39;      <li hz="@foxmail.com"></li>&#39;+
        &#39;    </ul>&#39;+
        &#39;  </div>&#39;;
  //將div追加到body上
  $(&#39;body&#39;).append(strHtml);    
  var autoComplete,autoLi;
  autoComplete = $(&#39;#AutoComplete&#39;);   
  autoComplete.data(&#39;elt&#39;,elt);
  autoLi = autoComplete.find(&#39;li&#39;);
  autoLi.mouseover(function(){
    $(this).siblings().filter(&#39;.hover&#39;).removeClass(&#39;hover&#39;);
    $(this).addClass(&#39;hover&#39;);
  }).mouseout(function(){
    $(this).removeClass(&#39;hover&#39;);
  }).mousedown(function(){
    autoComplete.data(&#39;elt&#39;).val($(this).text()).change();
    autoComplete.hide();
  });
  //用戶名補全+翻動
  elt.keyup(function(e){
    if(/13|38|40|116/.test(e.keyCode) || this.value==&#39;&#39;){
      return false;
    }
    var username = this.value;
    if(username.indexOf(&#39;@&#39;)==-1){
      autoComplete.hide();
      return false;
    }
    autoLi.each(function(){
      this.innerHTML = username.replace(/\@+.*/,&#39;&#39;)+$(this).attr(&#39;hz&#39;);
      if(this.innerHTML.indexOf(username)>=0){
        $(this).show();
      }else{
        $(this).hide(); 
      }
    }).filter(&#39;.hover&#39;).removeClass(&#39;hover&#39;);
    autoComplete.show().css({
      left : $(this).offset().left,
      top : $(this).offset().top + $(this).outerHeight(true) - 1,
      position: &#39;absolute&#39;,
      zIndex: &#39;99999&#39;
    });
    if(autoLi.filter(&#39;:visible&#39;).length==0){
      autoComplete.hide();
    }else{
      autoLi.filter(&#39;:visible&#39;).eq(0).addClass(&#39;hover&#39;);     
    }
  }).keydown(function(e){
    if(e.keyCode==38){ //上
      autoLi.filter(&#39;.hover&#39;).prev().not(&#39;.AutoComplete_title&#39;).addClass(&#39;hover&#39;).next().removeClass(&#39;hover&#39;);
    }else if(e.keyCode==40){ //下
      autoLi.filter(&#39;.hover&#39;).next().addClass(&#39;hover&#39;).prev().removeClass(&#39;hover&#39;);
    }else if(e.keyCode==13){ //確定
      autoLi.filter(&#39;.hover&#39;).mousedown();
    }
  }).focus(function(){
    autoComplete.data(&#39;elt&#39;,$(this));
  }).blur(function(){
    autoComplete.hide();
  });
};
         
      CSS代碼：css/emailAutoComple.css
      #AutoComplete{background:#fff;border:1px solid #4190db;display:none;width:150px;}
#AutoComplete ul{list-style-type:none;margin:0;padding:0;}
#AutoComplete li{color:#333;cursor:pointer;font:12px/22px \5b8b\4f53;text-indent:5px;}
#AutoComplete .hover{background:#6eb6fe;color:#fff;}
      ? ?
      

      

      效果圖：
      

      20161114114050736.jpg
      


						
      
					
      
					
      
						
      本站聲明
      
						
      本文內容由網(wǎng)友自發(fā)貢獻，版權歸原作者所有，本站不承擔相應法律責任。如您發(fā)現(xiàn)有涉嫌抄襲侵權的內容，請聯(lián)系admin@php.cn
      
					
      
				
      

				



				
      


				
    


					


											
      
							
      
								
      
									
									
      熱AI工具
      
								
      
								
      
																		
      
											
												Undress AI Tool
											
											
      
												
													
      Undress AI Tool
      
												      
												
      免費脫衣服圖片
      
											
      
										
      
																		
      
											
												Undresser.AI Undress
											
											
      
												
													
      Undresser.AI Undress
      
												      
												
      人工智能驅動的應用程序，用于創(chuàng)建逼真的裸體照片
      
											
      
										
      
																		
      
											
												AI Clothes Remover
											
											
      
												
													
      AI Clothes Remover
      
												      
												
      用于從照片中去除衣服的在線人工智能工具。
      
											
      
										
      
																		
      
											
												Clothoff.io
											
											
      
												
													
      Clothoff.io
      
												      
												
      AI脫衣機
      
											
      
										
      
																		
      
											
												Video Face Swap
											
											
      
												
													
      Video Face Swap
      
												      
												
      使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！
      
											
      
										
      
																
      
								
							
      
						
      
					


					


											
      
							
      
								
      
									
									
      熱工具
      
								
      
								
      
																		
      
											
												記事本++7.3.1
											
											
      
												
													
      記事本++7.3.1
      
												      
												
      好用且免費的代碼編輯器
      
											
      
										
      
																			
      
											
												SublimeText3漢化版
											
											
      
												
													
      SublimeText3漢化版
      
												      
												
      中文版，非常好用
      
											
      
										
      
																			
      
											
												禪工作室 13.0.1
											
											
      
												
													
      禪工作室 13.0.1
      
												      
												
      功能強大的PHP集成開發(fā)環(huán)境
      
											
      
										
      
																			
      
											
												Dreamweaver CS6
											
											
      
												
													
      Dreamweaver CS6
      
												      
												
      視覺化網(wǎng)頁開發(fā)工具
      
											
      
										
      
																			
      
											
												SublimeText3 Mac版
											
											
      
												
													
      SublimeText3 Mac版
      
												      
												
      神級代碼編輯軟件(SublimeText3)