/**
* Email automatic prompt plug-in
* @constructor EmailAutoComplete
* @ options {object} configurable items
*/
function EmailAutoComplete(options) {
= {
targetCls : '.inputElem', // Target input element
parentCls : '.parentCls', // Parent class of the current input element
hiddenCls : '.hiddenCls', // Current input hidden domain
searchForm : '.jqtransformdone', //form form
hoverBg : 'hoverBg', �
inputValColor : 'red', �
mailArr : ["@","@","@","@","@","@","@","@","@","@","@","@","@","@","@","@"], //Email Array
isSelectHide : true, �
callback �
};
= {
onlyFlag : true, // Only render once
currentIndex : -1,
oldIndex : -1
};
(options);
}
= {
constructor: EmailAutoComplete,
init: function(options){
= $.extend(,options || {});
var self = this,
_config = ,
_cache = ;
$(_config.targetCls).each(function(index,item){
$(item).keyup(function(e){
var target = ,
targetVal = $.trim($(this).val()),
keycode = ,
elemHeight = $(this).outerHeight(),
elemWidth = $(this).outerWidth(),
parentNode = $(this).closest(_config.parentCls);
$(parentNode).css({'position':'relative'});
// If the input box value is empty, the drop-down box is hidden
if(targetVal == '') {
$(item).attr({'data-html':''});
// Assign values to the hidden domain
$(_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});
// Assign values to the hidden domain
$(_config.hiddenCls,parentNode).val(targetVal);
$(".auto-tip",parentNode) && $(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).removeClass('hidden');
// Render the content of the drop-down box
self._renderHTML({keycode:keycode,e:e,target:target,targetVal:targetVal,height:elemHeight,width:elemWidth,parentNode:parentNode});
}
});
});
// Block form form default enter key submission
$(_config.searchForm).each(function(index,item) {
$(item).keydown(function(e){
var keyCode = ;
if(keyCode == 13) {
return false;
}
});
});
// When clicking on the document document, the drop-down box is hidden
$(document).click(function(e){
();
var target = ,
tagCls = _config.(/^\./,'');
if(!$(target).hasClass(tagCls)) {
$('.auto-tip') && $('.auto-tip').each(function(index,item){
!$(item).hasClass('hidden') && $(item).addClass('hidden');
});
}
});
},
/*
* Rendering drop-down box prompt content
* @param cfg{object}
*/
_renderHTML: function(cfg) {
var self = this,
_config = ,
_cache = ,
curVal;
var curIndex = self._keyCode();
$('.auto-tip',).hasClass('hidden') && $('.auto-tip',).removeClass('hidden');
if(curIndex > -1){
// Keyboard up and down operation
self._keyUpAndDown(,,);
}else {
if(/@/.test()) {
curVal = (/@.*/,'');
}else {
curVal = ;
}
if(_cache.onlyFlag) {
$().append('<input type="hidden" class="hiddenCls"/>');
var wrap = '<ul class="auto-tip">';
for(var i = 0; i < _config.; 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;
$().append(wrap);
$('.auto-tip',).css({'position':'absolute','top':,'width': - 2 + 'px','left':0,
'border':'1px solid #ccc','z-index':10000});
}
// Add attributes to all li data-html
$('.auto-tip li',).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});
});
// Accurately match content
self._accurateMate({target:,parentNode:});
// When the mouse moves to a certain li
self._itemHover();
// When clicking on the corresponding item
self._executeClick();
}
},
/**
* Exactly match a certain item
*/
_accurateMate: function(cfg) {
var self = this,
_config = ,
_cache = ;
var curVal = $.trim($(,).attr('data-html')),
newArrs = [];
if(/@/.test(curVal)) {
// Get the value before @
var prefix = (/@.*/, ""),
suffix = (/.*@/, "");
$.map(_config.mailArr,function(n){
var reg = new RegExp(suffix);
if((n)) {
(n);
}
});
if( > 0) {
$('.auto-tip',).html('');
$(".auto-tip",) && $(".auto-tip",).hasClass('hidden') &&
$(".auto-tip",).removeClass('hidden');
var html = '';
for(var j = 0, jlen = ; 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',).html(html);
// Add attributes to all li data-html
$('.auto-tip li',).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});
});
// When matching to an item exactly, make the current index equal to the initial value
_cache.currentIndex = -1;
_cache.oldIndex = -1;
$('.auto-tip .output-num',).html(prefix);
// When the mouse moves to a certain li
self._itemHover();
// When clicking on the corresponding item
self._executeClick();
}else {
$(".auto-tip",) && !$(".auto-tip",).hasClass('hidden') &&
$(".auto-tip",).addClass('hidden');
$('.auto-tip',).html('');
}
}
},
/*
* When the mouse is moved to a certain li
*/
_itemHover: function(parentNode) {
var self = this,
_config = ,
_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);
});
},
/*
* When the input box value is empty, delete all li items. class hoverBg
*/
_removeBg: function(parentNode){
var self = this,
_config = ;
$(".auto-tip li",parentNode).each(function(index,item){
$(item).hasClass(_config.hoverBg) && $(item).removeClass(_config.hoverBg);
});
},
/**
* Keyboard up and down key operations
*/
_keyUpAndDown: function(targetVal,e,parentNode) {
var self = this,
_cache = ,
_config = ;
// If the request is successful, data is returned (judged based on the length of the element) Perform the following operations
if($('.auto-tip' + ' li',parentNode) && $('.auto-tip' + ' li').length > 0) {
var plen = $('.auto-tip' + ' li',parentNode).length,
keyCode = ;
_cache.oldIndex = _cache.currentIndex;
// Move up operation
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);
// Assign values to the hidden domain
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 40) { //Move down operation
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);
// Assign values to the hidden domain
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 13) { //Enter operation
var curVal = $('.auto-tip' + ' .p-index'+_cache.oldIndex,parentNode).attr('data-html');
$(_config.targetCls,parentNode).val(curVal);
// Assign values to the hidden domain
$(_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 = ; i < ilen; i++) {
if(code == arrs[i]) {
return i;
}
}
return -1;
},
/**
* When the data is the same, when the corresponding item is clicked, return the data
*/
_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');
}
// Assign value to the hidden domain
$(_config.hiddenCls,parentNode).val(dataAttr);
_config.callback && $.isFunction(_config.callback) && _config.callback();
});
}
};
// Initialization
$(function() {
new EmailAutoComplete({});
});