基于js 的自动提示控件

最近在工作中需要自动提示的功能，本身单独的这个控件来开发难度不是很大，特别是针对项目需求对应的单一功能，但是为了让开发出的控件可以随意使用，动态配置，那么这就需要一定的时间来开发了。

先说一下我们这个自动提示的功能的要求，在input控件中输入一些值，在对应的下方会有对应合适的选项，类似百度自动提示的功能。我的这个控件为了可以在很多地方可以不做修改的进行引入，所以支持方法配置，样式配置，不需要任何其他js库，使用ajax实现等功能，在调用的时候只需一个div 给出对应的id和方法名就可以的，还可进行其他样式的配置。源代码不是很长，实现的功能也不够完善。

下面给出一个实例：

<!doctype html>
<html lang="en">
	<head>
		<script type="text/javascript" src="js/magusauto.js">
</script>
	</head>
	<body>
		<div id="magusauto" method="*.trend"></div>
	</body>
</html>

这个html文件简单到不是程序员都可以看懂了。 最为核心的地方就是

<div id="magusauto" method="*.trend"></div>

其中 id不可变，js要根据这个id找到对应的div，然后在其后面添加控件，method 是可配置的。对应后台调用的action ，返回结构是使用‘|’进行分割的字符串。

下面给出js源码：

/**
 * Created by se7en on 2015-06-02.
 *
 *	控件是为了实现类似于百度自动提示的功能
 *
 * 为了实现可重用，控件提供样式美化，参数可配置数据自动获取
 */

// ********************** 显示隐藏Tip层 *******************************//
var _key;

String.prototype.trim = function()
{
	return this.replace(/(^\s*)|(\s*$)/g, "");
};

String.prototype.replaceAll = function(pattern,str)
{
	return this.replace(new RegExp(pattern, "gm"), str);
};

function ShowTip()
{
	document.getElementById(MagusObject.tipId).onmouseleave = function()
	{
		document.getElementById(MagusObject.tipId).style.display = "none";
	}

	document.onclick = function()
	{
		document.getElementById(MagusObject.tipId).style.display = "none";
	}

	document.getElementById(MagusObject.valueId).ondblclick = function(e)
	{
		_key = (e == null) ? event.keyCode : e.which
		if (_key != 39 && _key != 40 && _key != 37 && _key != 38 && _key != 13
				&& _key != 17)
		{
			document.getElementById(MagusObject.tipId).style.display = "";
			document.getElementById(MagusObject.tipId).innerHTML = " 正在获取提示...";
			VCreateAjax(MagusObject.method, BackArray, "KeyWord="
					+ document.getElementById(MagusObject.valueId).value);
		}
	}

	document.getElementById(MagusObject.valueId).onkeyup = function(e)
	{
		_key = (e == null) ? event.keyCode : e.which
		if (_key != 39 && _key != 40 && _key != 37 && _key != 38 && _key != 13
				&& _key != 17)
		{
			document.getElementById(MagusObject.tipId).style.display = "";
			document.getElementById(MagusObject.tipId).innerHTML = " 正在获取提示...";
			// 类似ajax的一个方法
			VCreateAjax(MagusObject.method, BackArray, "KeyWord="
					+ document.getElementById(MagusObject.valueId).value);
		}
	}
	document.onkeyup = function(e)
	{
		_key = (e == null) ? event.keyCode : e.which
		if (_key == 13)
		{
			var pointnametext = document.getElementById(MagusObject.valueId).value;
			if (pointnametext && pointnametext.trim() != ""
					&& !trend_Util.checkNameRE(pointnametext.trim()))
			{
				defaultTrendGroup.addName(pointnametext.trim());
				document.getElementById(MagusObject.valueId).value = "";
			}

		}
	}
}

function HideTip()
{
	var _key;
	document.onkeyup = function(e)
	{
		_key = (e == null) ? event.keyCode : e.which
		if (_key != 39 && _key != 40 && _key != 37 && _key != 38 && _key != 13
				&& _key != 17)
		{
			document.getElementById(MagusObject.tipId).style.display = "none";
		}
	}
}

function HideTTip()
{
	document.getElementById(MagusObject.tipId).style.display = "none";
}
// ********************** 显示隐藏Tip层 ************************************* //

// ********************** Ajax初始化函数 IE7.0 **********************//
function VCreateAjax(VUrl,VBack,VVar)
{
	http_request_name = false;
	if (window.XMLHttpRequest)
	{// Mozilla, Safari,...
		http_request_name = new XMLHttpRequest();
	}
	if (window.ActiveXObject)
	{ // IE
		try
		{
			http_request_name = new ActiveXObject("Msxml3.XMLHTTP");
		} catch (e)
		{
			try
			{
				http_request_name = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e)
			{
				try
				{
					http_request_name = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e)
				{
				}
			}
		}
		if (http_request_name.overrideMimeType)
		{
			http_request_name.overrideMimeType('text/html');
		}

	}

	if (!http_request_name)
	{
		document.getElementById(MagusObject.tipId).innerHTML = "<img src='../images/Icon_warning_01.gif' border='0'> 不能创建XMLHTTP对象,请升级您的浏览器或操作系统！";
		return false;
	}
	http_request_name.onreadystatechange = VBack;
	http_request_name.open('POST', VUrl, true); // 这里用GET方法传递参数，不然会出现完成该操作所需的数据还不可使用的页面错误
	http_request_name.setRequestHeader('Content-type',
			'application/x-www-form-urlencoded');
	http_request_name.send(VVar);

}

// ********************************回调函数************************************
function BackArray()
{
	if (http_request_name.readyState == 4)
	{
		if (http_request_name.status == 200)
		{
			// 返回VCreateAjax 的URL 的Tip2.jsp的资源
			var resSource = http_request_name.responseText;
			if (resSource != "")
			{
				document.getElementById(MagusObject.tipId).innerHTML = "";
				var strSplits = resSource.split('|');
				var DIVStr = "";
				var FormatStr = "";
				var sum = strSplits.length - 1;
				var elementText = document.getElementById(MagusObject.valueId).value;
				// 搜索有内容
				if (sum > 1)
				{
					for (i = 1; i < sum; i++)// cut 0, and the end element
					{
						FormatStr = strSplits[i].replace(elementText,
								"<b><font color='black'>" + elementText
										+ "</font></b>")
						DIVStr += "<div id='"
								+ i
								+ "' hideFocus style='cursor:pointer;line-height:20px;' onmousemove='FocusOP("
								+ i + "," + sum + ");' onmouseout='UFocusOP("
								+ i + ");' onclick='ClickInner(\""
								+ strSplits[i] + "\");'>" + FormatStr
								+ "</div>";
					}

					document.getElementById(MagusObject.tipId).innerHTML = DIVStr;

					var i = 1;
					maxid = strSplits.length - 2;

					FocusOP(i, maxid);
					document.onkeydown = function(e)
					{
						_key = (e == null) ? event.keyCode : e.which
						// ///////////向下
						if (_key == 39 || _key == 40)
						{
							UFocusOP(i);
							i = i + 1;
							if (i > maxid)
							{
								i = 1;
							}
							FocusOP(i, maxid);
						}

						// ///////////向上
						else if (_key == 37 || _key == 38)
						{
							UFocusOP(i);
							i = i - 1;
							if (i < 1)
							{
								i = maxid;
							}
							FocusOP(i, maxid);
						}
						// 回车且弹出框显示有内容
						if (_key == 13
								&& document.getElementById(MagusObject.tipId).style.display != "none")
						{
							if (window.XMLHttpRequest)
							{
								document.getElementById(MagusObject.valueId).value = document
										.getElementById(i).textContent;
							} else
							{
								document.getElementById(MagusObject.valueId).value = document
										.getElementById(i).innerText;
							}
							document.getElementById(MagusObject.tipId).style.display = "none";
						}
					}// end key down
				}//
			} else
			{
				// alert("无数据...");
				document.getElementById(MagusObject.tipId).style.display = "none";
			}
		} else
		{
			// alert("6");
			document.getElementById(MagusObject.tipId).innerHTML = " 找不到您想要的点！！";
		}
	}
}

// 获取焦点
function FocusOP(OPP,VNum)
{
	// 清除其它焦点
	for (M = 1; M < VNum; M++)
	{
		document.getElementById(M).focus = false;
		document.getElementById(M).style.background = "white";
	}
	document.getElementById(OPP).focus = true;
	document.getElementById(OPP).style.background = "#a9e4e9";// change to

}
// 失去焦点
function UFocusOP(EID)
{
	// alert(EID + " UFocusOP ");
	document.getElementById(EID).focus = false;
	document.getElementById(EID).style.background = "#FFFFFF";

}

// 单击注入值
function ClickInner(strValue)
{
	document.getElementById(MagusObject.valueId).value = strValue;
	document.getElementById(MagusObject.tipId).style.display = "none";
}

var MagusWidget = function()
{
	this.Init.apply(this, arguments);
};
MagusWidget.prototype =
{
	/**
	 * 初始化 控件属性
	 * @param {Object} container
	 * @param {Object} options
	 * @memberOf {TypeName}
	 */
	Init : function(container,options)
	{
		this.containerDiv = document.getElementById(container);
		MagusObject.method = this.getMethod(container);
		MagusObject.color = this.getColor(container);
		MagusObject.width = this.getWidth(container);
		MagusObject.height = this.getHeight(container);
		MagusObject.style = this.getStyle(container);
		MagusObject.options = options != null ? options :
		{
			width : '400px', height : '200px', backgroundColor : 'lightgrey',
			fontColor : 'blue'
		}
	},

	/**
	 * 获取控件对应的method名称，用于ajax调用
	 * @param {Object} container
	 * @return {TypeName}
	 */
	getMethod : function(container)
	{
		return document.getElementById(container).getAttribute("method");
	},

	/**
	 * 获取控件对应的颜色值
	 *
	 * @return {TypeName}
	 */
	getColor : function(container)
	{
		return null;
	},
	/**
	 * 获取控件的宽度
	 * @param {Object} contrainer
	 * @return {TypeName}
	 */
	getWidth : function(container)
	{
		return document.getElementById(container).getAttribute("width");
	},
	/**
	 * 获取控件的高度
	 * @param {Object} contrainer
	 * @return {TypeName}
	 */
	getHeight : function(container)
	{
		return document.getElementById(container).getAttribute("height");
	},

	/**
	 * 设置下拉框的样式
	 * @param {Object} container
	 * @return {TypeName}
	 */
	getStyle : function(container)
	{
		return '';
	},

	/**
	 * 页面加载的时候进行调用 显示页面
	 * @return {TypeName}
	 */
	View : function()
	{
		var html = '<input type="text" id="magus_value" ' + 'onblur="javascript:setTimeout(\'HideTTip()\',300);" ' + 'ondblclick="javascript:ShowTip();" onkeyup="javascript:if ( this.value!=\'\'){ ShowTip(); } else { HideTTip(); }" size="25" /> ' + '<div id="show"> <div id="magus_tip" name=MagusObject.tipId style="display: none" align="left"></div> </div>';
		return html;
	},

	Render : function()
	{
		var widgetDiv = document.createElement('div');
		widgetDiv.style.border = MagusObject.options.border;
		widgetDiv.style.width = MagusObject.options.width;
		widgetDiv.style.height = MagusObject.options.height;
		widgetDiv.style.cursor = 'pointer';
		widgetDiv.style.backgroundColor = MagusObject.options.backgroundColor;
		// widgetDiv.style.color=this.options.fontColor;
	widgetDiv.style.color = 'green';
	var html = this.View();
	widgetDiv.innerHTML = html;
	this.containerDiv.appendChild(widgetDiv);
}
}

/**
 * 页面加载的问题
 */
window.onload = function()
{
	var widget = new MagusWidget('magusauto',
	{
		width : '180px', height : '20px', backgroundColor : ''
	});
	/**
	 * 加载 控件
	 * @param {Object} event
	 */
	widget.Render();
	ShowTip();
};
/**
 *控件需要使用到的各种 属性
 */
var MagusObject =
{
	valueId : "magus_value", tipId : "magus_tip", method : null,
	color : "green", width : "200px", height : "40px", options : ""
}

源码也是很简单的js文件，只要有一点js基础应该都能看懂，如果有人任何疑问，欢迎留言。

时间： 2024-10-09 15:05:00

基于js 的自动提示控件的相关文章

一个基于jquery的智能提示控件intellSeach.js

一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户使用.说白了,就是用户边输入,系统会提示相关的结果:或者,当用户点击搜索框时,就推荐一些内容,如360.百度都会提示今天的主要新闻或搜索量大的内容. jquery 已经有一个这样的插件了,叫 autocomplete, 但我觉得不好用.关于autocomplete的介绍也很多,有兴趣的朋友可以去试试

福利到~分享一个基于jquery的智能提示控件intellSeach.js

一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户使用.说白了,就是用户边输入,系统会提示相关的结果:或者,当用户点击搜索框时,就推荐一些内容,如360.百度都会提示今天的主要新闻或搜索量大的内容. jquery 已经有一个这样的插件了,叫 autocomplete, 但我觉得不好用.关于autocomplete的介绍也很多,有兴趣的朋友可以去试试

jquery的智能提示控件

福利到~分享一个基于jquery的智能提示控件intellSeach.js 一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户使用.说白了,就是用户边输入,系统会提示相关的结果:或者,当用户点击搜索框时,就推荐一些内容,如360.百度都会提示今天的主要新闻或搜索量大的内容. jquery 已经有一个这样的插件了,叫 autocomplete, 但我

[转] 基于C#的波形显示控件的实现

转自 基于C#的波形显示控件的实现[附完整源码下载] 编者记: 09年暑假正好在学院实验室呆了一段时间,做了个完整的上位机软件(具体实现:根据下位机的指令,实现通过串口来操纵下位机进行实验,并将采集的数据进行处理和保存,并以图形的方式显示),整个项目边学C# WinForm边设计,这个波形显示控件就是项目中的一部分,也花了自己绝大多数时间.此外,顺便将该波形显示控件当作自己毕业设计的内容,下文实际上是节选自自己的本科毕业论文,希望对大家能有所帮助.代码以及文章有疏漏.错误.不妥之处在所难免,欢迎

MyEclipse添加JS插件（Spket控件）

一.安装Spket 网上更新方式 1.插件首页:http://www.spket.com        2.插件名称:Spket IDE        3.更新连接(Update Site):http://www.agpad.com/update 更新安装方法: 1.[Help]-[Software Updates]-[Find and Install...] 2.[Search for new features to install] -> [Next] 3.[New Remote Site.

JS与APP原生控件交互

"热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显得重要,不可能每次发布一个活动,都要发布一个现版本,当然这样对于Android还算可以,但是对于Ios呢?苹果应用商店每次审核的时间基本都在1~2周,这对于一个促销活动来说审核时间实在太长.而混合式开发正好可以解决这个问题,基本的原理时,通过原生控件实现APP的主体结构,借助H5开发对应的页面,这样每次发布活

JQuery自动填充控件：autocomplete（自己稍作了修改）

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="

jquery messagetip信息语提示控件

编写原因: 作为提示框,jquery有个messagebox的控件,也就是弹出的提示框.但这个控件如果不是用在需要确认的时候,单单警告提示.消息提示.失败提示时,用户还需要去点下确认,有时这操作还是挺烦的(尽管可以设置timeout,会自动消失). 控件需求: 现在需要一个简洁消息提示控件,不需确认. 1.提示框可以从顶部或底部滑入,在失效后滑出. 2.可以设置滑入时间,内容停留时间.滑出时间. PS:比较简单的控件 效果如下 编写过程: 1.在无文档的情况下, 我建议将用户能传的参数的定义写在

RS开发日期提示控件默认为昨天之进阶篇

时隔<RS开发日期提示控件默认为昨天>这篇博文已经很久了,请原谅我隔了这么久才继续来写这篇笔记.也希望读到这篇笔记的朋友可以从这篇笔记中学习到一些关于RS日期控件和JS的一些应用知识,当然这也可以为给业务部门做月报的同学提供一个高易用性的日期处理办法. 1:确保报表有提示页面,提示页面提供了给日期提示控件设置默认值为昨天的功能 2:确保[日期维度].[日]的key值格式为2009-01-01 yyyy-mm-dd 3:确保[事实].[日期]的格式为2009-01-01 yyyy-mm-dd 4