快速给你的表单添加自动提示功能

最新推荐文章于 2022-09-14 17:23:24 发布

恬谧人生

最新推荐文章于 2022-09-14 17:23:24 发布

阅读量1.2k

点赞数

分类专栏：技术类

本文链接：https://blog.csdn.net/wangjuntytl/article/details/12199675

版权

技术类专栏收录该内容

33 篇文章 0 订阅

订阅专栏

ajax的异步请求最常见的地方，就是用在表单域的自动提示吧，最近个信息管理项目几乎表单域都要用到这个功能，我就自己写了一个通用的插件，包含两个文件，js文件里面只有一个方法，在你需要做自动提示的表单域里调用改方法。一个jsp页面，用来。控制提示的样式。

js代码：

/**
 * @author WangJun 
 * 
 * 快速为你的表单域加入自动提示功能
 * 
 * -----------------------使用说明-----------------------
 * 1.在使用页面导入该文件
 * 2.导入jquery文件
 * 3，在你的servlet或action中把要提示的数据放入到集合里set或list集合里，在把集合放到request作用域，之后页面跳转到autoComplete.jsp
 * 4在要提示的表单域根据需要加入onfocus或onkeyup事件，事件的方法为autoComplete(url,id,resultSetName,target),
 * 
 * -----------------------注意-----------
 * 1.url的格式必须符合格式要求：例如：http://localhost：8080/wdb/findUser？username= 结尾必须是表单域的名字和=号结尾
 * 2，id表单域的id属性值
 * 3，resultSetName 你放在reques作用域的集合名字
 * 4，target提示显示区的id名
 * 
 * 
 * 
 */
		

/**
 * @author WangJun 
 * @param url 你要请求的url 格式 xxxxxxx?inputName= 注意：inputName是要自动完成的表单域名，且必须以它加=号结尾
 * @param id  表单域的id属性值
 * @param resultSetName 自动完成的基本数据名字：它可以是放在你的request作用域或session作用域的集合数据
 * @param target 提示显示区，建议是一个div
 */
function autoComplte(url,id,resultSetName,target){
		    var arg = encodeURI($("#"+id).val());
		    var urlwj = url+arg+"&inputname="+$("#"+id).attr("name")+"&resultsetname="+resultSetName;
		    $.get(urlwj,function(data){
		    $("#"+target).html(data);
		    });
	}

jsp:用来控制样式

<%-- 
             用来调整提示数据的格式
    
    @version $Date: 2012-6-26
    
    @author WangJun
--%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'tip.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
	$(function() {
		var inputName = $("#wjinputname").val();
		$(".wjrow").mouseover(function() {
			$(this).css("background", "highlight");
		}).mouseout(function() {
			$(this).css("background", "azure");
		}).click(function() {
			$("#" + inputName).val($(this).html());
			$("#wjcontent").remove();
			$("#wjinputname").remove();
		});
	});
</script>
<style type="text/css">
.wjrow {
	border-left: thin silver solid;
	border-right: thin silver solid;
	border-top: thin silver solid;
	height: 25px;
	width: 150px;
}

#wjcontent {
	border-bottom: thin silver solid;
	background: azure;
	width: 156px;
	z-index: auto;
	max-height: 200px;
	overflow: auto;
}
</style>

</head>

<body>
	<!-- 得到请求方法传来的表单域的name属性值，为了点击提示区时将值天道表单域内 -->
	<input value="<%=request.getParameter("inputname")%>" id="wjinputname"
		type="hidden">
	<%
		/* 得到要遍历的集合的名字，并通过这个名字取得你放在request作用域的集合，之后将集合放在pageContext作用域，
		目的是解决el表达式语言不支持变量问题 */
		String resultsetname = request.getParameter("resultsetname");
		if (resultsetname != null || !resultsetname.equals(""))
			pageContext.setAttribute("result",
					request.getAttribute(resultsetname));
	%>
	<div>
		<c:if test="${!empty result }">
			<div id="wjcontent">
				<c:forEach items="${result }" var="wjval">
					<div class="wjrow">${wjval }</div>
				</c:forEach>
			</div>
		</c:if>
	</div>
</body>
</html>