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

深碍√TFBOYSˉ_ 2023-10-16 23:20 9阅读 0赞

**实现步骤如下：**

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

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文件

5、接受并处理数据

![Center][]

[Center]: https://img-blog.csdn.net/20160329160107309?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center