jQuery实现文本框邮箱输入自动补全效果

前端技术 2023/09/01 JavaScript

  邮箱自动完成的效果在网站上大多都看过，但是质量参差不齐，今天突然在网上看到一篇博客，感觉这个插件很好，就想来写一下分享给大家！

 效果图如下：

完整demo代码如下：

<!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实现效果代码（jquery.mailAutoComplete-4.0.js）如下：

(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? \' 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? $(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);

以上就是本文的全部内容，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/1948

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案