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({});
});

View Code

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;
}

View Code

调用如下：

<!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>

View Code

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

效果演示

posted on 2014-11-18 21:52 深谷&幽兰阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/fengchengjushi/p/4106832.html

jquery仿邮箱文本输入框自动加载邮箱后缀相关推荐

jQuery插件实现网页底部自动加载-类似新浪微博
要实现滚动条滚到底部自动加载后续内容到内容到底部的功能,用jQuery非常方便的,只要知道什么时候滚动到了底部就好办了. $(document).scrollTop() //获取垂直滚动条到顶部的距离 ...
基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息关键代码:代码如下: var stop=true; $(window).scroll(function(){ totalheight = parse ...
优秀的 jQuery 文本输入框自动完成自动提示插件
文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作,是非常好的产品使用体验.这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件,帮助你在网站中轻松添加输入框 ...
jQuery自动加载更多程序
1.1.1 摘要现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...
C语言界面列表的滑动效果,jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)...
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/ ...
仿新浪微博实现ListBox下拉刷新和到底部自动加载
一.下拉刷新下拉刷新实现思路: 1.定义一个PullDownToRefreshPanel容器控件.为它添加3种状态模板,分别是PullingDownTemplate,ReadyToReleaseTe ...
如何使用jQuery创建“请稍候，正在加载...”动画？
我想在我的网站上放置一个"请稍等,加载中"的旋转圆圈动画. 我应该如何使用jQuery完成此操作? #1楼 Jonathon的出色解决方案在IE8中中断(动画完全不显示). 要解决 ...
html底部自动加载下一页,js页面滚动到底部时自动加载下一页数据
一段滚动到页面底部自动加载更多数据的js代码,需要jquery.js . jquey.tmpl.js 支持 var Data = { PageCount: 1, PageSize: 30, IsCom ...
php 实现自动加载更多,$.ajax+php实战教程之下拉时自动加载更多文章原理分析二...
摘要: 继上一篇<$.ajax+php实战教程之下拉时自动加载更多文章原理分析>文章进行进一步讲解,完善之前的代码及引入ajax和php相关内容...... 上次留下的问题不知道看官们有没 ...

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

jquery仿邮箱文本输入框自动加载邮箱后缀相关推荐

最新文章

热门文章