实现步骤如下:
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、接受并处理数据