function EmailAutoComplete(options) {
this.config = {
targetCls: '.inputElem',
parentCls: '.parentCls',
hiddenCls: '.hiddenCls',
searchForm: '.jqtransformdone',
hoverBg: 'hoverBg',
inputValColor: 'black',
mailArr: ["","@qq.com","@163.com","@126.com","@sina.com","@gmail.com","@foxmail.com","@sohu.com","@vip.qq.com","@hotmail.com","@163.net","@sina.com.cn","@139.com","@189.cn","@33.cn"],
isSelectHide: 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);
console.log(targetVal);
if(targetVal.indexOf('script')>-1){
targetVal='';
$(this).val("");
return false;
}
$(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 }) } }) });
$(_config.searchForm).each(function(index, item) { $(item).keydown(function(e) {
var keyCode = e.keyCode;
if (keyCode == 13) {
return false
}
})
});
$(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') }) } }); }, _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('');
var wrap = '
';
for (var i = 0; i < _config.mailArr.length; i++) { wrap += '- ' + '' + _config.mailArr[i] + '
' }
wrap += '
';
_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 }) }
$('.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 });
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 += '' + '' + newArrs[j] + '' }
$('.auto-tip', cfg.parentNode).html(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);
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('') } } }, _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) }) }, _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({}) });