基于js 的自动提示控件

最新推荐文章于 2021-12-04 19:10:00 发布
最新推荐文章于 2021-12-04 19:10:00 发布
阅读量1k 收藏
点赞数
分类专栏： js 文章标签： js 自动提示控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012251421/article/details/46413127
版权

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

先说一下我们这个自动提示的功能的要求，在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;' οnmοusemοve='FocusOP("
								+ i + "," + sum + ");' οnmοuseοut='UFocusOP("
								+ i + ");' οnclick='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" ' + 'οnblur="javascript:setTimeout(\'HideTTip()\',300);" ' + 'οndblclick="javascript:ShowTip();" οnkeyup="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基础应该都能看懂，如果有人任何疑问，欢迎留言。

洪小灯
关注
专栏目录
jQuery+js实现提示灯效果
cyrrgt的博客
10-25 576
效果展示 这是一个小小的提示灯效果的小程序，看一下效果吧 代码展示 这是CSS样式的代码 .blue{ height: 50px; width: 40px; background-color: blue; border-radius: 20px 20px 2px 2px; } ...
js自动提示插件
02-22
自己写的一个基于jquery的网页自动提示插件
js提示框控件
aiqianli4773的博客
06-20 150
　　在页面顶部中心位置显示提示信息，只需绑定提示框的类型，内容，和显示时间，简单易用。类型有错误、正确、警告提示框。一般用于验证与登录退出，提示不符合验证条件的提示信息。 Tips() Contents Tips() myType myHtml myWorkTime show(callback) close(callback) mySlideUpCallback...
【JS相关插件】自动完成提示插件(jquery.autocomplete)
04-01
NULL 博文链接：https://zhuhong7000-gmail-com.iteye.com/blog/1399012
MyEclips中JS代码提示插件(spket)
q1054261752的博客
05-10 905
近期需要大量使用JS来开发，但是MyEclipse2014自带的JS编辑器没有代码提示的功能，开发效率有点低，所以安装了一个Spket的插件，过程非常简单，SVN插件的安装比这个更简单。     Spket插件的安装：     首先下载插件：http://download.csdn.net/detail/u012909091/7335891     解压文件，然后将解压后的文件全
Tips基于jQuery的提示框插件可自动消失可手动消失
08-09
本文将详细讲解如何使用基于jQuery的Tips插件，该插件允许提示框自动消失或由用户手动消失，从而为用户提供更加友好的交互体验。 首先，我们来了解jQuery Tips插件的基本概念。Tips插件主要用于在网页上显示临时...
自动完成控件ajax修改版源码.zip
06-19
在“自动完成控件ajax修改版源码.zip”这个压缩包中，我们很可能是找到了一个经过改良的、基于Ajax的自动完成功能的源代码实现。 Ajax的核心在于XMLHttpRequest对象，它使得JavaScript能够发送HTTP请求并处理响应，...
一种基于浏览器的自动小票机打印实现方案(js版)
10-21
总结起来，基于浏览器的自动小票机打印实现方案，特别是通过JavaScript实现的版本，为Web应用提供了一种高效、便捷且用户体验良好的打印方式。该方案的实施，不仅要求开发者具备前端开发技术，还需要对打印机、操作...
jQuery的Ajax的自动完成功能控件简要说明
10-27
jQuery的Ajax自动完成功能控件还支持许多自定义选项和事件，如定义数据处理函数、设置提示列表的样式、控制提示列表的显示和隐藏等，以满足不同项目的需求。开发者可以通过查阅官方文档来了解更多高级特性和用法。 ...
基于Extjs的开源控件库ExtAspNet中文版 v3.1.9
04-02
基于Extjs的开源控件库ExtAspNet中文版 v3.1.9，ExtAspNet - 基于 ExtJS 的专业 ASP.NET 2.0 控件库，拥有完善的 AJAX 支持和丰富的界面效果。ExtAspNet 是一组基于 ExtJS 的专业 ASP.NET 2.0 控件库，拥有完善的 ...
html外部js代码自动弹出提示,简单JS自动提示文本框代码
weixin_39930144的博客
05-30 1058
本例以颜色为例，为用户提供自动提示，展示效果和运行结果如图：1、建立框架结构： Color: 2、页面和表单CSS：3、实现JS匹配用户输入：var oInputField; //考虑到很多函数中都要使用var oPopDiv; //因此采用全局变量的形式var oColorsUl;var aColors = ["red","green","blue","magenta","yellow",……"...
自动提示文本框、下拉列表和适配器
lisacheni的博客
09-13 213
自动提示文本框(AutoCompleteTextView) 下拉列表（ Spinner） 适配器（Adapter） 1. 高级控件绑定数据用于前台展示的三步骤： ①：准备数据 ②：初始化适配器 ③：给控件绑定适配器 2.适配器种类和作用 ①：数组适配器 ArrayAdapter ...
JS-自动提示组件
depravedAngel1833的专栏
08-19 246
注：源自Ajax实战 实现自动提示功能： [code="java"] Type Ahead window.onload = function(){ var elemSpan = document.createElement("sp...
Android开发之四（八）：常用控件之自动提示（AutoCompleteTextView）
专注学习物联网
04-05 589
当用户在输入框输入内容的时候，软件自动提示很多与用户输入的内容相关的内容供用户选择，比如百度。 要实现这个功能首先在布局文件中创建一个AutoCompleteTextView, 然后通过ArrayAdapter将我们准备自动提示的内容和AutoCompleteTextView进行适配，这样就可以创建出我们需要的功能了。 AutoCompleteTextView的简单介绍以及使
怎样用javascript给控件赋值,使在服务器端得到此控件的值？或怎样将前台的(或js)中的值传递到后台
GoodShot的专栏
09-27 5979
问： 怎样用javascript给控件赋值,使在服务器端得到此控件的值？ ______________________________________________________________________________________________ 答1： 没人回答吗？ ____________________________________________________
Auto.js学习笔记1—基于控件的操作
qq_45769329的博客
12-04 7479
Release scrcpy v1.16 · Genymobile/scrcpy (github.com)
Auto.js学习笔记——快速入门：对控件的操作（常用函数、获取控件、点击、输入等）
热门推荐
Insomnia_X的博客
08-06 1万+
function clickBtn(btnText,waitingDelay){//传入一个按钮，确保点击了该按钮（搭配findOne，可能传入null或按钮） var btn = text(btnText).clickable(true).findOne(waitingDelay);//在给定时间内持续寻找，直到找到 if(!btn)return false;//未在给定时间内找到按钮 while(!btn.click());//不断点击按钮直到成功，因此之前要确保按钮是可点击的
利用jQuery实现智能提示控件intellSeach.js详解
总结来说，这篇文档为开发者提供了一个基于jQuery的智能提示控件的实用指南，帮助他们在项目中快速集成并定制个性化的搜索体验。对于希望通过前端技术增强搜索功能的开发者来说，这是一份宝贵的参考资料。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值