Struts2+jQuery+JSON 实现输入关键字后提示框显示数据

最新推荐文章于 2017-09-04 17:00:21 发布

凌冰_

最新推荐文章于 2017-09-04 17:00:21 发布

阅读量494

点赞数

分类专栏： Struts2

本文链接：https://blog.csdn.net/hlx20080808/article/details/51006629

版权

Struts2 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

实现步骤如下：

1、JSP页面使用脚本代码执行ajax请求

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/search.js"></script>
<style type="text/css">
body{text-align: center;}
#searchDiv {width:250px;margin:0px auto;text-align:left;}
#content {width:150px;}
#suggest {display:none; font-size:12px; width:152px; border:gray 1px solid;}
</style>
</head>
<body>
	<div></div>
	<div id="searchDiv">
		<form action="">
			请输入关键字：<input id="content" type="text">
			<input id="search-btn" type="button" value="查询"><br>
			<div id="suggest"></div>  <!-- 显示关联的数据 -->
		</form>
	</div>
</body>

2、脚本文件

$(document).ready(function(){
	var oldContent = "";//文本变化前的内容，使用它和新内容对比，发生了变化才发送ajax请求
	$("#content").keyup(function(){
		var content = $.trim($("#content").val());  //文本内容
		if(content == "" || content == oldContent){
			return;//没有输入内容或者文本内容没有发生变化时就返回
		}
		oldContent = content;
		var params = {"input":$.trim($("#content").val())};  //页面要传的参数
		$.ajax({
			url:"getKeyword",   //action 
			type:"post",
			data:params,      //传参数
			dataType:"json",    //数据类型JSON
			success:function(data){
				//alert(JSON.stringify(data));
				if(data.keywords.length == 0){
					//没有关键字就隐藏提示框，并返回
					$("#suggest").hide();
					return;
				}
				$("#suggest").show().html("");//显示提示框并清空提示框
				
				//添加关键字列表
				for(var i=0;i<data.keywords.length;i++){
					$("#suggest").append("<div class='keyword'>"+data.keywords[i]+"</div>");
				}
				
				//为新添加的关键字列表添加事件
				$(".keyword").live("mousemove",function(event){
					//鼠标移入背景变成灰色
					$(event.target).css("background-color","silver");
				});
				
				$(".keyword").live("mouseout",function(event){
					//鼠标移出背景变成白色
					$(event.target).css("background-color","white");		
				});
				
				$(".keyword").live("dblclick",function(event){
					//双击时把内容加入到输入框
					$("#content").val($(event.target).html());
					$("#suggest").hide();   //隐藏
					oldContent = "";
				});
			},
			error:function(){
				alert("Ajax请求出错.....");
			}
		});
	});
});

3、Action中查询出需要返回的数据，并转换为json类型模式数据

public class SearchAction extends ActionSupport {
	private String input; // 传过来参数
	private List<String> keywords; // 数据

	public String getInput() {
		return input;
	}

	public void setInput(String input) {
		this.input = input;
	}

	public List<String> getKeywords() {
		return keywords;
	}

	public void setKeywords(List<String> keywords) {
		this.keywords = keywords;
	}

	@Override
	public String execute() throws Exception {
		// 获取关键词
		String[] words = { "流向", "流水线", "流星花园", "流量表", "张三","张飞","张天爱" };
		keywords = new ArrayList<String>();

		// 遍历
		for (String string : words) {
			if (string.indexOf(input) != -1) {
				keywords.add(string);
			}
		}
		return SUCCESS;
	}
}

4、配置struts.xml文件

	<package name="hang1" namespace="/" extends="json-default">
		<action name="getKeyword" class="com.hlx.ajax.SearchAction">
		   <result type="json"></result>
		</action>

	</package>

5、接受并处理数据