首頁 > 開發者 > JavaScript
jQuery實現文字框郵箱輸入自動補全效果，jquery補全
郵箱自動完成的效果在網站上大多都看過，但是品質參差不齊，今天突然在網上看到一篇部落格，感覺這個外掛程式很好，就想來寫一下分享給大家！
如下：
完整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);
以上就是本文的全部內容，希望對大家的學習有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
