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

2019-11-20 11:15:10

字体：大中小

来源：转载

供稿：网友

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

效果图如下：

完整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);

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

上一篇：jquery实现邮箱自动填充提示功能

下一篇：基于Jquery和html5的7款个性化地图插件