Design ideas
-> 从搜索框获得输入字符串
-> 利用 $.get(url, args, function(data){...},"json") 方法
-> 将请求地址 url 以及 参数 args 发送给 url 中包含的后台的 Servlet程序
-> Servlet 对 url 中的请求参数与 list 中数据比对
-> 把其中以传入值为开头的数据放入一个新的 List 中，取名 values
-> 使用 jackson 中的 ObjectMapper 对象将 values 转为 json 数组返回给前端页面
-> 返回的 json 数组即 data，分别将其中的每个值添加到 li 中即可index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
input{
top:300px;
height:40px;
}
#txt_search{
position:absolute;
width:600px;
left:350px;
}
#txt_search:hover{
box-shadow: 3px 3px 3px #888888;
}
#btn_search{
position:absolute;
width:100px;
right:250px;
background: #3366FF;
boder-radius:50px;
}
#btn_search:hover{
background: #6666FF;
}
ul{
position:absolute;
width:600px;
height:40px;
left:310px;
top:323px;
}
li{
list-style: none;
font-size:20px;
line-height:40px;
border-bottom: 1px solid rgba(0,0,0,0.1);
transition:1s;
}
li a{
display:block;
width:100%;
}
/* 注意不要写成 li:hover 这样是没效果的 */
li :hover{
background:#3366FF;
}
</style>
<script type="text/javascript" src = "${pageContext.request.contextPath}/scipts/jquery-2.1.0.js"></script>
<script type="text/javascript">
$(function(){
$(":input[name = 'search' ]").keyup(function(){
/* 每次用户释放按键时，将上次的提示内容清空 */
$("#list li").remove();
var $val = $(this).val();
var url = "${pageContext.request.contextPath}/searchservlet?content="+$val;
var args = {"time":new Date()};
$.get(url, args, function(data){
/* 响应回来的为 json 对象数组 */
for(var i = 0; i < data.length; i++)
$("#list").append("<li><a>"+data[i].content+"</a></li>");
},"json");
});
})
</script>
</head>
<body>
<input type = "search" id = "txt_search" name = "search" placeholder = "请输入搜索文字.."/>
<input type = "button" id = "btn_search" value = "百度一下"/>
<div>
<ul id ="list">
</ul>
</div>
</body>
</html>SearchServlet.java
package com.anqi.ajax.app.servlets;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.anqi.ajax.app2.beans.SearchItem;
import com.fasterxml.jackson.databind.ObjectMapper;
@WebServlet("/searchservlet")
public class SearchServlet extends HttpServlet {
private List<SearchItem> list;
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
list = new ArrayList<>();
list.add(new SearchItem("anqi"));
list.add(new SearchItem("ajax"));
list.add(new SearchItem("anHua"));
list.add(new SearchItem("lichen"));
list.add(new SearchItem("baizhantang"));
String keyword = request.getParameter("content");
List<SearchItem>values = new ArrayList<>();
for (SearchItem searchItem : list) {
if(searchItem.getContent().startsWith(keyword))
values.add(searchItem);
}
//将 List 转化为了 json 数组
ObjectMapper mapper = new ObjectMapper();
String result = mapper.writeValueAsString(values);
// result 为 -> [{"content":"anqi"},{"content":"ajax"},{"content":"anHua"}]
// result 为 -> [{"content":"baizhantang"}]
//设置响应类型为 json 格式
response.setContentType("text/javascript");
response.getWriter().print(result);
}
}
display effect
