jquery 实现的输入框智能提示邮箱后缀

by gothic

HTML

<div class="parentCls">
<input type="text" class="inputElem">
</div>

CSS

* {margin: 0;padding: 0;}
ul,li{list-style:none;}
.inputElem {width:198px;height:22px;line-height:22px;border:1px solid #ff4455;}
.parentCls{width:200px;}
.auto-tip li{width:100%;height:22px;line-height:22px;font-size:14px;}
.auto-tip li.hoverBg{background:#ddd;cursor:pointer;}
.red{color:red;}
.hidden {display:none;}

JavaScript

function EmailAutoComplete(options) {

 	this.config = {
		targetCls      :  '.inputElem',       // 目标input元素
		parentCls      :  '.parentCls',       // 当前input元素的父级类
		hiddenCls      :  '.hiddenCls',       // 当前input隐藏域
		searchForm     :  '.jqtransformdone', //form表单
		hoverBg        :  'hoverBg',          // 鼠标移上去的背景
		inputValColor  :  'red',              // 输入框输入提示颜色
		mailArr        : ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"], //邮箱数组
		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') &&...