1.在html中输入邮箱的input要有自己的class，以及自己父元素的class。例如：
// 初始化
$(function() {
new EmailAutoComplete({
parentCls : ‘.parentemail’, // 当前input元素的父级类
targetCls : ‘.email’, // 目标input元素
// …更多的配置项参考插件的config
});
});
2.引入插件：
3.将插件的浮动添加默认样式(可以根据自己的页面修改的样式)：
*{font-family: “微软雅黑”;margin:0;padding:0;}
ul,li{list-style:none;}
.inputElem {height:22px;line-height:22px;border:1px solid #ff4455;}
.auto-tip li{width:100%;height:30px;line-height:30px;font-size:16px;background:#eee;}
.auto-tip li.hoverBg{background:#ddd;cursor:pointer;}
.auto-tip li .em{color:#ccc;}
.red{color:#bbb;}
.hidden {display:none;}
4.最后是插件代码：
/**
* 邮箱自动提示插件
* @constructor EmailAutoComplete
* @ options {object} 可配置项
*/
function EmailAutoComplete(options) {
this.config = {
targetCls : ‘.inputElem’, // 目标input元素
parentCls : ‘.parentCls’, // 当前input元素的父级类
hiddenCls : ‘.hiddenCls’, // 当前input隐藏域
searchForm : ‘.jqtransformdone’, //form表单
hoverBg : ‘hoverBg’, // 鼠标移上去的背景
inputValColor : ‘red’, // 输入框输入提示颜色
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(‘’);
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});
}
// 给所有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’) &&
