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

来源：互联网发布：电视机电视直播软件编辑：程序博客网时间：2024/06/05 02:34

实现步骤如下：

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",    //数据类型JSONsuccess: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;}@Overridepublic 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、接受并处理数据

0 0