jquery css實現郵箱自動補全-PHP开发-PHP中文網

首頁

php教程

PHP开发

jquery css實現郵箱自動補全

高洛峰

Dec 07, 2016 am 09:54 AM

今天在公司做一个电子商务网站的注册会员时，要求用户在电子邮箱文本框中输入时，给与热点提示常用的电子邮箱，帮助用户选择，提高体验效果。下面是用Jquery+css实现的邮箱自动补全，供大家参考和学习。

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（实现自动补全的关键代码）

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;}

效果图：

jquery css實現郵箱自動補全

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

Atom編輯器mac版下載

最受歡迎的的開源編輯器

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。