上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能，发现还有一个不错的自动提示插件：
先展示结果如图：
html代码：<center><h1>输入邮箱试试！</h1><
br/><divclass="parentCls"><inputtype="text"class="inputElem"></div></center>
CSS代码：@charset "utf-8";
*{outline:none;margin:0;padding:0;font-family:microsoft yahei;
}ul, li{list-style:none;
}.inputElem{width:198px;height:22px;line-height:22px;border:1px solid #ccc;
}.parentCls{width:200px;height:auto;margin:0 auto;
}.auto-tipli{width:100%;text-align:left;height:22px;line-height:22px;font-size:14px;
}.auto-tip li.hoverBg{background:#ddd;cursor:pointer;
}.auto-tip li em{font-style:normal;}.red{color:#333;
}.hidden{display:none;
}
jquery代码：/**
* 邮箱自动提示插件
* @constructor EmailAutoComplete
* @ options {object} 可配置项*/functionEmailAutoComplete(options) {this.config ={
targetCls :'.inputElem',//目标input元素parentCls : '.parentCls',//当前input元素的父级类hiddenCls : '.hiddenCls',//当前input隐藏域searchForm : '.jqtransformdone',//form表单hoverBg : 'hoverBg',//鼠标移上去的背景inputValColor : 'black',//输入框输入提示颜色mailArr : ["@QQ.com","@Gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"],//邮箱数组isSelectHide :true,//点击下拉框 是否隐藏 默认为truecallback :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 ||{});varself =this,
_config=self.config,
_cache=self.cache;
$(_config.targetCls).each(function(index,item){
$(item).keyup(function(e){vartarget =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){varkeyCode =e.keyCode;if(keyCode == 13) {returnfalse;
}
});
});//点击文档document时候 下拉框隐藏掉$(document).click(function(e){
e.stopPropagation();vartarget =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) {varself =this,
_config=self.config,
_cache=self.cache,
curVal;varcurIndex =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"/>');varwrap = '<ul class="auto-tip">';for(vari = 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);varemVal = $.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) {varself =this,
_config=self.config,
_cache=self.cache;varcurVal = $.trim($(cfg.target,cfg.parentNode).attr('data-html')),
newArrs=[];if(/@/.test(curVal)) {//获得@ 前面 后面的值varprefix = curVal.replace(/@.*/, ""),
suffix= curVal.replace(/.*@/, "");
$.map(_config.mailArr,function(n){varreg =newRegExp(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');varhtml = '';for(varj = 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);varemVal = $.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) {varself =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){varself =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) {varself =this,
_cache=self.cache,
_config=self.config;//如果请求成功后 返回了数据(根据元素的长度来判断) 执行以下操作if($('.auto-tip' + ' li',parentNode) && $('.auto-tip' + ' li').length > 0) {varplen = $('.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);varcurAttr = $('.auto-tip' + ' .p-index'+_cache.currentIndex,parentNode).attr('data-html');
$(_config.targetCls,parentNode).val(curAttr);//给隐藏域赋值$(_config.hiddenCls,parentNode).val(curAttr);
}
}elseif(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);varcurAttr = $('.auto-tip' + ' .p-index'+_cache.currentIndex,parentNode).attr('data-html');
$(_config.targetCls,parentNode).val(curAttr);//给隐藏域赋值$(_config.hiddenCls,parentNode).val(curAttr);
}
}elseif(keyCode == 13) {//回车操作varcurVal = $('.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) {vararrs = ['17','18','38','40','37','39','33','34','35','46','36','13','45','44','145','19','20','9'];for(vari = 0, ilen = arrs.length; i < ilen; i++) {if(code ==arrs[i]) {returni;
}
}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){vardataAttr = $(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();
});
}
};
View Code
调用方式：
//初始化$(function() {newEmailAutoComplete({});
});
需要查看例子，请点击下载demo。