小插件 通过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 : ["@","@","@","@","@","@","@","@","@","@"], //邮箱数组

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+'">'+'<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(func