jquery仿邮箱文本输入框自动加载邮箱后缀

在像百度这样的网站注册时，你会看到输入邮箱会出现自动给用户输入补全主流邮箱。这种对于增加用户体验的小例子已司空见惯。正好看到人家写的这种js功能。还挺不错,使用起来很方便，几乎不用写神呢代码。"傻瓜式式的"拿来主义"就行了。

js:

/*** 邮箱自动提示插件* @constructor EmailAutoComplete* @ options {object} 可配置项*/
function EmailAutoComplete(options) {this.config = {targetCls: '.inputElem',       // 目标input元素parentCls: '.parentCls',       // 当前input元素的父级类hiddenCls: '.hiddenCls',       // 当前input隐藏域 searchForm: '.jqtransformdone', //form表单hoverBg: 'hoverBg',          // 鼠标移上去的背景inputValColor: 'black',              // 输入框输入提示颜色mailArr: ["@qq.com", "@gmail.com", "@126.com", "@163.com", "@hotmail.com", "@yahoo.com", "@yahoo.com.cn", "@live.com", "@sohu.com", "@sina.com", "@yeah.net", "@21cn.com"], //邮箱数组isSelectHide: true,                // 点击下拉框 是否隐藏 默认为truecallback: null                 // 点击某一项回调函数
    };this.cache = {onlyFlag: true,     // 只渲染一次currentIndex: -1,oldIndex: -1};this.init(options);
}EmailAutoComplete.prototype = {constructor: EmailAutoComplete,init: function (options) {this.config = $.extend(this.config, options || {});var self = this,_config = self.config,_cache = self.cache;$(_config.targetCls).each(function (index, item) {$(item).keyup(function (e) {var target = e.target,targetVal = $.trim($(this).val()),keycode = e.keyCode,elemHeight = $(this).outerHeight(),elemWidth = $(this).outerWidth(),parentNode = $(this).closest(_config.parentCls);$(parentNode).css({ 'position': 'relative' });// 如果输入框值为空的话 那么下拉框隐藏if (targetVal == '') {$(item).attr({ 'data-html': '' });// 给隐藏域赋值$(_config.hiddenCls, parentNode).val('');_cache.currentIndex = -1;_cache.oldIndex = -1;$(".auto-tip", parentNode) && !$(".auto-tip", parentNode).hasClass('hidden') && $(".auto-tip", parentNode).addClass('hidden');self._removeBg(parentNode);} else {$(item).attr({ 'data-html': targetVal });// 给隐藏域赋值
                    $(_config.hiddenCls, parentNode).val(targetVal);$(".auto-tip", parentNode) && $(".auto-tip", parentNode).hasClass('hidden') && $(".auto-tip", parentNode).removeClass('hidden');// 渲染下拉框内容
                    self._renderHTML({ keycode: keycode, e: e, target: target, targetVal: targetVal, height: elemHeight, width: elemWidth, parentNode: parentNode });}});});// 阻止form表单默认enter键提交$(_config.searchForm).each(function (index, item) {$(item).keydown(function (e) {var keyCode = e.keyCode;if (keyCode == 13) {return false;}});});// 点击文档document时候 下拉框隐藏掉$(document).click(function (e) {e.stopPropagation();var target = e.target,tagCls = _config.targetCls.replace(/^\./, '');if (!$(target).hasClass(tagCls)) {$('.auto-tip') && $('.auto-tip').each(function (index, item) {!$(item).hasClass('hidden') && $(item).addClass('hidden');});}});},/** 渲染下拉框提示内容* @param cfg{object}*/_renderHTML: function (cfg) {var self = this,_config = self.config,_cache = self.cache,curVal;var curIndex = self._keyCode(cfg.keycode);$('.auto-tip', cfg.parentNode).hasClass('hidden') && $('.auto-tip', cfg.parentNode).removeClass('hidden');if (curIndex > -1) {// 键盘上下操作
            self._keyUpAndDown(cfg.targetVal, cfg.e, cfg.parentNode);} else {if (/@/.test(cfg.targetVal)) {curVal = cfg.targetVal.replace(/@.*/, '');} else {curVal = cfg.targetVal;}if (_cache.onlyFlag) {$(cfg.parentNode).append('<input type="hidden" class="hiddenCls"/>');var wrap = '<ul class="auto-tip">';for (var i = 0; i < _config.mailArr.length; i++) {wrap += '<li class="p-index' + i + '">' + '<span class="output-num"></span><em class="em" data-html="' + _config.mailArr[i] + '">' + _config.mailArr[i] + '</em></li>';}wrap += '</ul>';_cache.onlyFlag = false;$(cfg.parentNode).append(wrap);$('.auto-tip', cfg.parentNode).css({'position': 'absolute', 'top': cfg.height, 'width': cfg.width - 2 + 'px', 'left': 0,'border': '1px solid #ccc', 'z-index': 10000});}// 给所有li添加属性 data-html$('.auto-tip li', cfg.parentNode).each(function (index, item) {$('.output-num', item).html(curVal);!$('.output-num', item).hasClass(_config.inputValColor) &&$('.output-num', item).addClass(_config.inputValColor);var emVal = $.trim($('.em', item).attr('data-html'));$(item).attr({ 'data-html': curVal + '' + emVal });});// 精确匹配内容
            self._accurateMate({ target: cfg.target, parentNode: cfg.parentNode });// 鼠标移到某一项li上面时候
            self._itemHover(cfg.parentNode);// 点击对应的项时
            self._executeClick(cfg.parentNode);}},/*** 精确匹配某项内容*/_accurateMate: function (cfg) {var self = this,_config = self.config,_cache = self.cache;var curVal = $.trim($(cfg.target, cfg.parentNode).attr('data-html')),newArrs = [];if (/@/.test(curVal)) {// 获得@ 前面 后面的值var prefix = curVal.replace(/@.*/, ""),suffix = curVal.replace(/.*@/, "");$.map(_config.mailArr, function (n) {var reg = new RegExp(suffix);if (reg.test(n)) {newArrs.push(n);}});if (newArrs.length > 0) {$('.auto-tip', cfg.parentNode).html('');$(".auto-tip", cfg.parentNode) && $(".auto-tip", cfg.parentNode).hasClass('hidden') &&$(".auto-tip", cfg.parentNode).removeClass('hidden');var html = '';for (var j = 0, jlen = newArrs.length; j < jlen; j++) {html += '<li class="p-index' + j + '">' + '<span class="output-num"></span><em class="em" data-html="' + newArrs[j] + '">' + newArrs[j] + '</em></li>';}$('.auto-tip', cfg.parentNode).html(html);// 给所有li添加属性 data-html$('.auto-tip li', cfg.parentNode).each(function (index, item) {$('.output-num', item).html(prefix);!$('.output-num', item).hasClass(_config.inputValColor) &&$('.output-num', item).addClass(_config.inputValColor);var emVal = $.trim($('.em', item).attr('data-html'));$(item).attr('data-html', '');$(item).attr({ 'data-html': prefix + '' + emVal });});// 精确匹配到某项时候 让当前的索引等于初始值_cache.currentIndex = -1;_cache.oldIndex = -1;$('.auto-tip .output-num', cfg.parentNode).html(prefix);// 鼠标移到某一项li上面时候
                self._itemHover(cfg.parentNode);// 点击对应的项时
                self._executeClick(cfg.parentNode);} else {$(".auto-tip", cfg.parentNode) && !$(".auto-tip", cfg.parentNode).hasClass('hidden') &&$(".auto-tip", cfg.parentNode).addClass('hidden');$('.auto-tip', cfg.parentNode).html('');}}},/** 鼠标移到某一项li上时*/_itemHover: function (parentNode) {var self = this,_config = self.config,_cache = self.cache;$('.auto-tip li', parentNode).hover(function (index, item) {!$(this).hasClass(_config.hoverBg) && $(this).addClass(_config.hoverBg);}, function () {$(this).hasClass(_config.hoverBg) && $(this).removeClass(_config.hoverBg);});},/** 当输入框值为空时候 li项都删掉class hoverBg*/_removeBg: function (parentNode) {var self = this,_config = self.config;$(".auto-tip li", parentNode).each(function (index, item) {$(item).hasClass(_config.hoverBg) && $(item).removeClass(_config.hoverBg);});},/*** 键盘上下键操作*/_keyUpAndDown: function (targetVal, e, parentNode) {var self = this,_cache = self.cache,_config = self.config;// 如果请求成功后 返回了数据(根据元素的长度来判断) 执行以下操作if ($('.auto-tip' + ' li', parentNode) && $('.auto-tip' + ' li').length > 0) {var plen = $('.auto-tip' + ' li', parentNode).length,keyCode = e.keyCode;_cache.oldIndex = _cache.currentIndex;// 上移操作if (keyCode == 38) {if (_cache.currentIndex == -1) {_cache.currentIndex = plen - 1;} else {_cache.currentIndex = _cache.currentIndex - 1;if (_cache.currentIndex < 0) {_cache.currentIndex = plen - 1;}}if (_cache.currentIndex !== -1) {!$('.auto-tip .p-index' + _cache.currentIndex, parentNode).hasClass(_config.hoverBg) &&$('.auto-tip .p-index' + _cache.currentIndex, parentNode).addClass(_config.hoverBg).siblings().removeClass(_config.hoverBg);var curAttr = $('.auto-tip' + ' .p-index' + _cache.currentIndex, parentNode).attr('data-html');$(_config.targetCls, parentNode).val(curAttr);// 给隐藏域赋值
                    $(_config.hiddenCls, parentNode).val(curAttr);}} else if (keyCode == 40) { //下移操作if (_cache.currentIndex == plen - 1) {_cache.currentIndex = 0;} else {_cache.currentIndex++;if (_cache.currentIndex > plen - 1) {_cache.currentIndex = 0;}}if (_cache.currentIndex !== -1) {!$('.auto-tip .p-index' + _cache.currentIndex, parentNode).hasClass(_config.hoverBg) &&$('.auto-tip .p-index' + _cache.currentIndex, parentNode).addClass(_config.hoverBg).siblings().removeClass(_config.hoverBg);var curAttr = $('.auto-tip' + ' .p-index' + _cache.currentIndex, parentNode).attr('data-html');$(_config.targetCls, parentNode).val(curAttr);// 给隐藏域赋值
                    $(_config.hiddenCls, parentNode).val(curAttr);}} else if (keyCode == 13) { //回车操作var curVal = $('.auto-tip' + ' .p-index' + _cache.oldIndex, parentNode).attr('data-html');$(_config.targetCls, parentNode).val(curVal);// 给隐藏域赋值
                $(_config.hiddenCls, parentNode).val(curVal);if (_config.isSelectHide) {!$(".auto-tip", parentNode).hasClass('hidden') && $(".auto-tip", parentNode).addClass('hidden');}_config.callback && $.isFunction(_config.callback) && _config.callback();_cache.currentIndex = -1;_cache.oldIndex = -1;}}},_keyCode: function (code) {var arrs = ['17', '18', '38', '40', '37', '39', '33', '34', '35', '46', '36', '13', '45', '44', '145', '19', '20', '9'];for (var i = 0, ilen = arrs.length; i < ilen; i++) {if (code == arrs[i]) {return i;}}return -1;},/*** 当数据相同的时 点击对应的项时 返回数据*/_executeClick: function (parentNode) {var _self = this,_config = _self.config;$('.auto-tip' + ' li', parentNode).unbind('click');$('.auto-tip' + ' li', parentNode).bind('click', function (e) {var dataAttr = $(this).attr('data-html');$(_config.targetCls, parentNode).val(dataAttr);if (_config.isSelectHide) {!$(".auto-tip", parentNode).hasClass('hidden') && $(".auto-tip", parentNode).addClass('hidden');}// 给隐藏域赋值
            $(_config.hiddenCls, parentNode).val(dataAttr);_config.callback && $.isFunction(_config.callback) && _config.callback();});}
};// 初始化
$(function () {new EmailAutoComplete({});
});

cs:

@charset "utf-8";
* {margin:0;padding:0;
}
ul, li {list-style:none;
}
.inputElem {width:198px;height:22px;line-height:22px;border:1px solid #ccc;
}
.parentCls {width:200px;height:auto; margin:0 auto;
}
.auto-tip li {width:100%;height:22px;line-height:22px;font-size:14px;
}
.auto-tip li.hoverBg {background:#ddd;cursor:pointer;
}
.red {color:#333;
}
.hidden {display:none;
}

调用如下：

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>主流邮箱补充提示</title><link href="css/jquery.emailAutoComplete.css" type="text/css" rel="stylesheet" /><script src="js/jquery.min.js"></script><script src="js/jquery.emailAutoComplete.js"></script>
</head><body><div class="parentCls"><input type="text" class="inputElem" /></div>
</body>
</html>

哈哈，怎么样。使用起来确实很方便。

效果演示