<input id="tdgho"><legend id="tdgho"></legend></input>
    1. <i id="tdgho"></i>
      4. <li id="tdgho"><meter id="tdgho"></meter></li><li id="tdgho"><dl id="tdgho"></dl></li><center id="tdgho"></center>
      <rt id="tdgho"><optgroup id="tdgho"></optgroup></rt>
    4. <label id="tdgho"></label>
      <li id="tdgho"><big id="tdgho"></big></li>
    6. \r\n  \r\n        姓名：\r\n        郵箱：\r\n  <\/form>\r\n <\/body>\r\n<\/html><\/pre>
         <\/p>
      <\/p>
       JS代碼：js\/emailAutoComple.js（實(shí)現(xiàn)自動補(bǔ)全的關(guā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  \/\/用戶名補(bǔ)全+翻動\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
      \"JQuery-CSS<\/p>"}	
	







      国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂
      
	

      
    

      

	
	
      
		
      
			
      
							
      
					
      
						Heim
						
												php教程
						
												PHP開發(fā)
						
						JQuery-CSS zur automatischen Vervollst?ndigung von E-Mails
					
      
					
					
      
						
      
							
      JQuery-CSS zur automatischen Vervollst?ndigung von E-Mails
      
							
							Dec 07, 2016 am	 09:54 AM
														
						
      
					
      
					
      
					
      
						
      
						
						
						

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

      HTML代碼：emailAutoComple.html
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>郵箱自動補(bǔ)全</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");  //（要補(bǔ)全文本框的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（實(shí)現(xiàn)自動補(bǔ)全的關(guā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();
  });
  //用戶名補(bǔ)全+翻動
  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;}
      ? ?
      

      

      效果圖：
      

      JQuery-CSS zur automatischen Vervollst?ndigung von E-Mails
      


						
      
					
      
					
      
						
      Erkl?rung dieser Website
      
						
      Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
      
					
      
				
      

				



				
      


				
    


					


											
      
							
      
								
      
									
									
      Hei?e KI -Werkzeuge
      
								
      
								
      
																		
      
											
												Undress AI Tool
											
											
      
												
													
      Undress AI Tool
      
												      
												
      Ausziehbilder kostenlos
      
											
      
										
      
																		
      
											
												Undresser.AI Undress
											
											
      
												
													
      Undresser.AI Undress
      
												      
												
      KI-gestützte App zum Erstellen realistischer Aktfotos
      
											
      
										
      
																		
      
											
												AI Clothes Remover
											
											
      
												
													
      AI Clothes Remover
      
												      
												
      Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
      
											
      
										
      
																		
      
											
												Clothoff.io
											
											
      
												
													
      Clothoff.io
      
												      
												
      KI-Kleiderentferner
      
											
      
										
      
																		
      
											
												Video Face Swap
											
											
      
												
													
      Video Face Swap
      
												      
												
      Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
      
											
      
										
      
																
      
								
							
      
						
      
					


					


											
      
							
      
								
      
									
									
      Hei?e Werkzeuge
      
								
      
								
      
																		
      
											
												Notepad++7.3.1
											
											
      
												
													
      Notepad++7.3.1
      
												      
												
      Einfach zu bedienender und kostenloser Code-Editor
      
											
      
										
      
																			
      
											
												SublimeText3 chinesische Version
											
											
      
												
													
      SublimeText3 chinesische Version
      
												      
												
      Chinesische Version, sehr einfach zu bedienen
      
											
      
										
      
																			
      
											
												Senden Sie Studio 13.0.1
											
											
      
												
													
      Senden Sie Studio 13.0.1
      
												      
												
      Leistungsstarke integrierte PHP-Entwicklungsumgebung
      
											
      
										
      
																			
      
											
												Dreamweaver CS6
											
											
      
												
													
      Dreamweaver CS6
      
												      
												
      Visuelle Webentwicklungstools
      
											
      
										
      
																			
      
											
												SublimeText3 Mac-Version
											
											
      
												
													
      SublimeText3 Mac-Version
      
												      
												
      Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
      
											
      
										
      
																	
      
								
							
      
						
      
										

					
					
      
						
      
							
      
								
								
      Hei?e Themen
      
							
      
							
      
															
															
      
									PHP-Tutorial
									
      
										
      
											
											1502
										
      
										
      
											
											276