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