生活随笔
收集整理的這篇文章主要介紹了
邮箱自动补全
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近做的項目，需要用到郵箱的自動補全，但是只是三個常見的
所以就自己寫了下，代碼如下：
<!DOCTYPE html>
<html><head><title>自動補全</title><style type="text/css">.text_input {padding: 5px 8px;border: 1px solid #ccc;border-radius: 3px;font-size: 22px;}.text_input:focus {outline: none;}.hide {display: none !important;}.drop_down_ul {padding-left: 0;}.drop_down_ul li {cursor: pointer;list-style: none;padding: 2px 0 2px 15px;text-align: left;}.drop_down_ul li:hover,.drop_down_ul li.active {background-color: #3394ff;color: #fff;}body {text-align: center;}</style></head><body><h1>輸入郵箱</h1><div class="input_wraper"><input class="text_input j_autocomplete"></div><script charset="utf-8" src="http://libs.useso.com/js/jquery/1.9.1/jquery.js"></script><script type="text/javascript">function AutoComplete($, inputEle) {var $targetEle = $(inputEle),mailSuffix = ['qq.com', '163.com', '126.com'],dropDownHtml = '<div class="hide" style="position: fixed; background-color: #fff; max-height: 200px;z-index: 9999;border: 1px solid #ccc;' + 'padding-bottom: 20px;" id="mailAutoComplete"><ul class="drop_down_ul"></ul></div>',$bodyEle = $(window);$('body').append(dropDownHtml)$completeELe = $('#mailAutoComplete');/*** 設置下拉框的位置*/function setSearchResultPos() {var offset = $targetEle.offset(),windowScrollTop = $(window).scrollTop() || document.documentElement.clientTop,windowScrollLeft = $(window).scrollLeft() || document.documentElement.clientLeft,width = $targetEle[0].offsetWidth,height = $targetEle[0].offsetHeight;$completeELe.css({top: (offset.top + height - windowScrollTop - 1) + 'px',left: (offset.left - windowScrollLeft) + 'px',width: (width - 2) + 'px'});}/*** 是否展示下拉框* @returns {boolean}*/function isShowComplete() {var mailText = $targetEle.val();return mailText.replace(/\s/g, '').length >= 1;}/*** 獲取補全的下拉文本列表*/function getCompleteText() {var mailSuffixConfig = mailSuffix,mailText = $.trim($targetEle.val()),mailPre = mailText.split('@')[0],textList = [],matchList = [];$.each(mailSuffixConfig, function(index, suffix) {textList.push(mailPre + '@' + suffix);});$.each(textList, function(i, text) {if(text.indexOf(mailText) != -1) {matchList.push(text);}});if(matchList.length == 1 && matchList[0] == mailText) {return [];}return matchList;}function hideSearchResult() {$completeELe.addClass('hide');}function showSearchResult() {var ul = '',textList = getCompleteText();if(textList.length) {setSearchResultPos();$.each(textList, function (i, text) {ul += '<li>' + text + '</li>';});$completeELe.find('ul').html(ul);$completeELe.removeClass('hide');} else {hideSearchResult();}}function searchDown() {var $activeLi = $completeELe.find('li.active'),$firstLi = $completeELe.find('li:first-child');if($activeLi.length) {var $nextLi = $activeLi.next();$activeLi.removeClass('active');($nextLi.length) ? $nextLi.addClass('active') : $firstLi.addClass('active');} else {$firstLi.addClass('active');}}function searchUp() {var $activeLi = $completeELe.find('li.active'),$lastLi = $completeELe.find('li:last-child');if($activeLi.length) {var $beforeLi = $activeLi.prev(); //獲取前一個元素$activeLi.removeClass('active');($beforeLi.length) ? $beforeLi.addClass('active') : $lastLi.addClass('active');} else {$lastLi.addClass('active');}}//鍵盤↑↓按鍵監聽function dealKeyUpDown(e) {if(!$completeELe.hasClass('hide')) { //下拉框可見var k = e.charCode || e.keyCode; // 兼容 firefox charCodeif (k == 40) {searchDown();} else if (k == 38) {searchUp();} else if(k == 13) {var $activeLi = $completeELe.find('li.active');if($activeLi.length) {$activeLi.click();}}}}$targetEle.keyup(function(e) {e.preventDefault();var k = e.charCode || e.keyCode; // 兼容 firefox charCodeif (k == 40 || k == 38 || (k == 13)) {dealKeyUpDown(e);//鍵盤↑↓按鍵監聽} else if (isShowComplete()) {showSearchResult();} else {hideSearchResult();}return false;});//鍵盤↑↓按鍵監聽$completeELe.on('keyup', function(e) {dealKeyUpDown(e) ;});$targetEle.click(function() {isClickOnResult = false;if(isShowComplete()) {showSearchResult();} else {hideSearchResult();}return false;});var isClickOnResult = false,isMouseOver = false;$bodyEle.click(function() { !isClickOnResult && hideSearchResult(); isClickOnResult = false; });$bodyEle.resize(function(){ setSearchResultPos(); });$(window).scroll(function() { hideSearchResult(); });$completeELe.click(function() {isClickOnResult = true;return false;});$completeELe.mouseover(function() {isMouseOver = true;});$completeELe.mouseleave(function() {isMouseOver = false;});$completeELe.delegate('li', 'click', function() {$targetEle.val($(this).text());isMouseOver = false;$targetEle.blur(); //觸發一下blur事件 讓提示語消失isClickOnResult = true;hideSearchResult();return false;});}AutoComplete(window.jQuery, '.j_autocomplete');</script></body></html>
總結
以上是生活随笔為你收集整理的邮箱自动补全的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
