小插件，通过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"], //邮箱数组
isSelectHide : true, // 点击下拉框是否隐藏默认为true
callback : 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+'">'+''+_config.mailArr[i]+'</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+'">'+''+newArrs[j]+'</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(func

小插件，通过js实现邮箱自动提示功能相关推荐

[模仿微软Live.cn]JavaScript输入邮箱自动提示
原理是:在一个输入框中,当我输入任何字的时候自动下拉相应的邮箱提示,在输入框输入123的时候下拉框有所有123的邮箱输入其他的时候有其他文案对应的邮箱. 同理此插件不需要任何html标签, ...
java培训教程分享：Java编写软件代码自动提示功能
本期的java培训教程分享主要是介绍的java编写软件代码的一个自动提示功能,很多零基础和初学java的同学们对这一块还不是很了解,Eclipse for android 实现代码自动提示智能提示功能 ...
js脚本实现自动签到功能
js脚本实现自动签到功能 1.首先在谷歌浏览器安装Tampermonkey插件 2.写入脚本 // ==UserScript== // @name New Userscript // @namespa ...
Eclips写Java代码和CSS、Javascript、Html代码设置代码自动提示功能
按照我的方法设置后用Eclipse编写Java代码和前端代码(Html.CSS.JS)都可以自动提示代码.赶紧去试试吧. 1.打开Eclipse软件,点击Windows→Preferences→Jav ...
python控制相机自动拍照_微信小程序实现倒计时调用相机自动拍照功能
这篇文章主要为大家详细介绍了微信小程序实现倒计时调用相机自动拍照功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下在某 ...
Ajax实现百度搜索框自动提示功能
Ajax实现百度搜索框自动提示功能当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息文章目录 Ajax实现百度搜索框自动提示功能一.实现效果二.代码实现 1.前端页面 2.后端 ...
eclipse hibernate配置文件（*.hbm.xml）加上自动提示功能
转自:https://blog.csdn.net/u012217085/article/details/17397843?utm_source=blogkpcl3 1. 标签:hibernate 在编 ...
[转]Android 代码自动提示功能
源地址http://blog.sina.com.cn/s/blog_7dbac12501019mbh.html 或者http://blog.csdn.net/longvslove/article/de ...
Eclipse输入Java和XML代码自动提示功能最简单的方法
Eclipse输入Java和XML代码自动提示功能 1.设置 java 文件的代码提示功能打开 Eclipse 依次选择 Window > Preferences > Java > ...
怎样增强MyEclipse的代码自动提示功能
转载自怎样增强MyEclipse的代码自动提示功能 MyElipse的默认代码提示功能隐藏了许多细节,需要开发者手动设置,一起来设置吧,让你的myeclpse更强大一般在Eclipse ,MyE ...

小插件，通过js实现邮箱自动提示功能

小插件，通过js实现邮箱自动提示功能相关推荐

最新文章

热门文章