suchen

Heim >Web-Frontend >js-Tutorial >jQuery realisiert den automatischen Vervollständigungseffekt der Textfeld-E-Mail-Eingabe_jquery

jQuery realisiert den automatischen Vervollständigungseffekt der Textfeld-E-Mail-Eingabe_jquery

WBOY
WBOYOriginal
2016-05-16 15:31:421367Durchsuche

Ich habe die Wirkung der automatischen E-Mail-Vervollständigung auf den meisten Websites gesehen, aber die Qualität ist unterschiedlich. Heute habe ich plötzlich ein Blog gesehen, das dieses Plugin sehr gut findet, also wollte ich es schreiben und teilen mit allen!

Die Darstellung ist wie folgt:

Der vollständige Democode lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>邮箱地址自动完成功能</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style>
.demo p {width:1000px; margin-left:auto; margin-right:auto;}
.input{padding:12px; width:300px; border:1px solid #c2c2c2; border-radius:4px; box-shadow:0 0 1px #fff, inset 0 0 2px rgba(0,0,0,.15); background-color:#F2F2F2; font-size:14px;}
.emailist{border:1px solid #bdbdbd; border-radius: 4px; background-color:#fff; color:#666; font-size:14px; list-style-type:0; padding:0; margin:0; overflow:hidden;}
.emailist li{padding:2px 11px; cursor:pointer;}
.emailist .on, .emailist li:hover{background-color:#eee;}
</style>
</head>
<body>
 <div class="demo">
 <p><input type="email" class="input inputMailList" name="email" placeholder="请输入邮箱" required autofocus autocomplete="off"></p>    
 </div>
</body>
</html>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/jquery.mailAutoComplete-4.0.js"></script>
<script type="text/javascript">
$(".inputMailList").mailAutoComplete();//使用方法
</script>

JS-Implementierungseffektcode (jquery.mailAutoComplete-4.0.js) lautet wie folgt: 

(function($) {
 $.fn.mailAutoComplete = function(options) {
  var defaults = {
   className: "emailist",
   email:  ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"], //邮件数组
   zIndex: 11 
  };
  // 最终参数
  var params = $.extend({}, defaults, options || {});
  
  // 是否现代浏览器
  var isModern = typeof window.screenX === "number", visibility = "visibility";
  // 键值与关键字
  var key = {
   "up": 38,
   "down": 40,
   "enter": 13,
   "esc": 27,
   "tab": 9 
  };
  // 组装HTML的方法
  var fnEmailList = function(input) {
   var htmlEmailList = '', arrValue = input.value.split("@"), arrEmailNew = [];
   $.each(params.email, function(index, email) {
    if (arrValue.length !== 2 || arrValue[1] === "" || email.indexOf(arrValue[1].toLowerCase()) === 0) {   
     arrEmailNew.push(email);      
    }
   }); 
   $.each(arrEmailNew, function(index, email) {
    htmlEmailList = htmlEmailList + '<li'+ (input.indexSelected===index&#63; ' class="on"':'') +'>'+ arrValue[0] + "@" + email +'</li>'; 
   });  
   return htmlEmailList;   
  };
  // 显示还是隐藏
  var fnEmailVisible = function(ul, isIndexChange) {
   var value = $.trim(this.value), htmlList = '';
   if (value === "" || (htmlList = fnEmailList(this)) === "") {
    ul.css(visibility, "hidden"); 
   } else {
    isIndexChange && (this.indexSelected = -1);
    ul.css(visibility, "visible").html(htmlList);
   }
  };
  
  return $(this).each(function() {
   this.indexSelected = -1;
   // 列表容器创建
   var element = this;
   var eleUl = $('<ul></ul>').css({
    position: "absolute",
    marginTop: element.offsetHeight,
    minWidth: element.offsetWidth - 2,
    visibility: "hidden",
    zIndex: params.zIndex
   }).addClass(params.className).bind("click", function(e) {
    var target = e && e.target;
    if (target && target.tagName.toLowerCase() === "li") {
     $(element).val(target.innerHTML).trigger("input");
     $(this).css(visibility, "hidden");
     element.focus(); // add on 2013-11-20
    }    
   });   
   $(this).before(eleUl);
   // IE6的宽度
   if (!window.XMLHttpRequest) { eleUl.width(element.offsetWidth - 2); } 
   
   // 不同浏览器的不同事件
   isModern&#63; $(this).bind("input", function() {
    fnEmailVisible.call(this, eleUl, true);
   }): element.attachEvent("onpropertychange", function(e) {    
    if (e.propertyName !== "value") return;
    fnEmailVisible.call(element, eleUl, true);  
   });
   
   $(document).bind({
    "click": function(e) {
     var target = e && e.target, htmlList = '';
     if (target == element && element.value && (htmlList = fnEmailList(element, params.email))) {
      eleUl.css(visibility, "visible").html(htmlList); 
     } else if (target != eleUl.get(0) && target.parentNode != eleUl.get(0)) {
      eleUl.css(visibility, "hidden");
     }
    },
    "keydown": function(e) {
     var eleLi = eleUl.find("li");
     if (eleUl.css(visibility) === "visible") {
      switch (e.keyCode) {
       case key.up: {
        element.indexSelected--;
        if (element.indexSelected < 0) {
         element.indexSelected = -1 + eleLi.length; 
        }
        e.preventDefault && e.preventDefault();
        break;
       }
       case key.down: {
        element.indexSelected++;
        if (element.indexSelected >= eleLi.length) {
         element.indexSelected = 0; 
        }
        e.preventDefault && e.preventDefault();
        break;
       }
       case key.enter: {  
        e.preventDefault();  
        eleLi.get(element.indexSelected) && $(element).val(eleLi.eq(element.indexSelected).html());
        eleUl.css("visibility", "hidden");
        break;
       }
       case key.tab: case key.esc: {
        eleUl.css("visibility", "hidden");
        break;
       }
      }
      if (element.indexSelected !== -1) {
       eleUl.html(fnEmailList(element));
      }
     }
    }
   });  
  });
 };
})(jQuery);

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Stellungnahme：
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
Vorheriger Artikel：Spezifische Implementierungsmethode zur hochpräzisen JavaScript-Überprüfung von ID-Nummer_Javascript-FähigkeitenNächster Artikel：Spezifische Implementierungsmethode zur hochpräzisen JavaScript-Überprüfung von ID-Nummer_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen