<del id="p0kob"><b id="p0kob"></b></del>
    <nav id="p0kob"><menu id="p0kob"></menu></nav>
    \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  \/\/用戶名補(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
    \"jquery<\/p>"}	
	







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

    
    

    

	
	
    
		
    
			
    
							
    
					
    
						Home
						
												php教程
						
												PHP開發(fā)
						
						jquery css to realize automatic completion of email
					
    
					
					
    
						
    
							
    jquery css to realize automatic completion of email
    
							
							Dec 07, 2016 am	 09:54 AM
														
						
    
					
    
					
    
					
    
						
    
						
						
						

					
    ?今天在公司做一個(gè)電子商務(wù)網(wǎng)站的注冊(cè)會(huì)員時(shí)，要求用戶在電子郵箱文本框中輸入時(shí)，給與熱點(diǎn)提示常用的電子郵箱，幫助用戶選擇，提高體驗(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();
  });
  //用戶名補(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;}
    ? ?
    

    

    效果圖：
    

    jquery css to realize automatic completion of email
    


						
    
					
    
					
    
						
    Statement of this Website
    
						
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    
					
    
				
    

				



				
    


				
    


					


											
    
							
    
								
    
									
									
    Hot AI Tools
    
								
    
								
    
																		
    
											
												Undress AI Tool
											
											
    
												
													
    Undress AI Tool
    
												    
												
    Undress images for free
    
											
    
										
    
																		
    
											
												Undresser.AI Undress
											
											
    
												
													
    Undresser.AI Undress
    
												    
												
    AI-powered app for creating realistic nude photos
    
											
    
										
    
																		
    
											
												AI Clothes Remover
											
											
    
												
													
    AI Clothes Remover
    
												    
												
    Online AI tool for removing clothes from photos.
    
											
    
										
    
																		
    
											
												Clothoff.io
											
											
    
												
													
    Clothoff.io
    
												    
												
    AI clothes remover
    
											
    
										
    
																		
    
											
												Video Face Swap
											
											
    
												
													
    Video Face Swap
    
												    
												
    Swap faces in any video effortlessly with our completely free AI face swap tool!
    
											
    
										
    
																
    
								
							
    
						
    
					


					


											
    
							
    
								
    
									
									
    Hot Tools
    
								
    
								
    
																		
    
											
												Notepad++7.3.1
											
											
    
												
													
    Notepad++7.3.1
    
												    
												
    Easy-to-use and free code editor
    
											
    
										
    
																			
    
											
												SublimeText3 Chinese version
											
											
    
												
													
    SublimeText3 Chinese version
    
												    
												
    Chinese version, very easy to use
    
											
    
										
    
																			
    
											
												Zend Studio 13.0.1
											
											
    
												
													
    Zend Studio 13.0.1
    
												    
												
    Powerful PHP integrated development environment
    
											
    
										
    
																			
    
											
												Dreamweaver CS6
											
											
    
												
													
    Dreamweaver CS6
    
												    
												
    Visual web development tools
    
											
    
										
    
																			
    
											
												SublimeText3 Mac version
											
											
    
												
													
    SublimeText3 Mac version
    
												    
												
    God-level code editing software (SublimeText3)