1. <rp id="a90x0"></rp>
  3. \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)自動(dòng)補(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  \/\/用戶(hù)名補(bǔ)全+翻動(dòng)\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日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂
    
	

    
    

    

	
	
    
		
    
			
    
							
    
					
    
						首頁(yè)
						
												php教程
						
												PHP開(kāi)發(fā)
						
						jquery css實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全
					
    
					
					
    
						
    
							
    jquery css實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全
    
							
							Dec 07, 2016 am	 09:54 AM
														
						
    
					
    
					
    
					
    
						
    
						
						
						

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

    HTML代碼：emailAutoComple.html
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>郵箱自動(dòng)補(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)自動(dòng)補(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();
  });
  //用戶(hù)名補(bǔ)全+翻動(dòng)
  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
    


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

				



				
    


				
    


					


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


					


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

					
					
    
						
    
							
    
								
								
    熱門(mén)話(huà)題