运行效果图如图所示
整个项目目录图如图所示
1. query.html中的代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#query").focus(function(){
var content = $.trim(this.value);
if(content == this.defaultValue) {
this.value = "";
}
}).blur(function(){
var content = $.trim(this.value);
if(content == "") {
this.value = this.defaultValue;
}
}).change(function(){
var keyWords = $.trim(this.value);
$("#resultDiv").slideUp(500,function(){
$.post("QueryServlet",{"queryStr":keyWords},function(data){
$("#resultDiv").empty();
if(data.length == 0) {
$("#resultDiv").append("<div>没有相关的查询结果</div>");
}else{
for(var i = 0; i < data.length; i++) {
$("#resultDiv").append("<div>"+data[i].companyName+"</div>");
}
}
$("#resultDiv").slideDown(500);
},"json");
});
});
});
</script>
</head>
<body>
<h1 style="margin-left: 570px;">Google Suggest</h1>
<input type="text" id="query" value="在这里输入查询关键字" />
<div id="resultDiv"></div>
</body>
</html>
2. bean类Company代码如下
package com.atguigu.suggest.bean;
public class Company {
private Integer companyId;
private String companyName;
public Company() {
}
public Company(Integer companyId, String companyName) {
super();
this.companyId = companyId;
this.companyName = companyName;
}
public Integer getCompanyId() {
return companyId;
}
public void setCompanyId(Integer companyId) {
this.companyId = companyId;
}
public String getCompanyName() {
return companyName;
}
public void setCompanyName(String companyName) {
this.companyName = companyName;
}
@Override
public String toString() {
return "Company [companyId=" + companyId + ", companyName="
+ companyName + "]";
}
}
3. CompanyDao类,初始化数据及返回查询结果集
public class CompanyDao {
public static final List<Company> COMPANY = new ArrayList<Company>();
static {
COMPANY.add(new Company(1, "中国银行尚硅谷分行"));
COMPANY.add(new Company(2, "尚硅谷国际教育集团北京分部"));
COMPANY.add(new Company(3, "硅谷世纪餐饮集团"));
COMPANY.add(new Company(4, "尚硅谷教育科技研究中心"));
COMPANY.add(new Company(5, "天津恒硅矿业"));
COMPANY.add(new Company(6, "幽幽谷娱乐中心"));
COMPANY.add(new Company(7, "俊尚美食城"));
COMPANY.add(new Company(8, "中国硅谷影视城"));
COMPANY.add(new Company(9, "尚硅谷图书中心"));
COMPANY.add(new Company(10, "尚硅谷营销总部"));
COMPANY.add(new Company(11, "Ajax学习指南"));
COMPANY.add(new Company(12, "在Web项目中使用Ajax"));
COMPANY.add(new Company(13, "Ajax异步交互"));
COMPANY.add(new Company(14, "透析Ajax对象"));
COMPANY.add(new Company(15, "详解Ajax异步交互技术"));
COMPANY.add(new Company(16, "jQuery技术内幕"));
COMPANY.add(new Company(17, "深度理解jQuery框架结构"));
COMPANY.add(new Company(18, "jQuery中的JavaScript精华"));
}
public static List<Company> queryList(String queryStr){
queryStr = queryStr.toLowerCase();
List<Company> companyList = new ArrayList<Company>();
for (Company company : COMPANY) {
String companyName = company.getCompanyName().toLowerCase();
boolean contains = companyName.contains(queryStr);
if(contains){
companyList.add(company);
}
}
return companyList;
}
}
4. QueryServlet类获取请求参数,并用GSON工具类将查询的结果集转换为JSON字符串传递到前台
public class QueryServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String queryStr = request.getParameter("queryStr");
System.out.println("queryStr="+queryStr);
List<Company> queryList = CompanyDao.queryList(queryStr);
Gson gson = new Gson();
String json = gson.toJson(queryList);
System.out.println(json);
response.setContentType("text/json;charset=UTF-8");
PrintWriter writer = response.getWriter();
writer.write(json);
}
}
5. 在web.xml文件中,配置QueryServlet的请求路径
<servlet>
<servlet-name>QueryServlet</servlet-name>
<servlet-class>com.atguigu.suggest.QueryServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>QueryServlet</servlet-name>
<url-pattern>/QueryServlet</url-pattern>
</servlet-mapping>