Maven构建项目
pom.xml中依赖引入
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.1</version>
</dependency>
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>
搜索框页面 servlet.jsp
<%@page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<html>
<head>
<style type="text/css">
#mydiv {
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -50px;
}
.mouseOver {
background: #708090;
color: #FFFAFA;
}
.mourseOut {
background: #FFFAFA;
color: #000000;
}
</style>
</head>
<body>
<div id="mydiv">
<%--输入框--%>
<input type="text" size="50" id="keyword"
οnblur="keywordBlur()"<%--onblur:失去鼠标焦点事件--%>
οnfοcus="getMoreContents()"<%--获得焦点是显示提示框--%>
οnkeyup="getMoreContents()"/><%--onkeyup:键盘放下触发事件--%>
<input type="button" value="百度一下" width="50px"/>
<div id="popDiv">
<table id="content_table" bgcolor="#f0f8ff" border="0" cellspacing="0" cellpadding="0">
<tbody id="content_table_body">
<%--动态查询出来的数据显示在这里--%>
<%--<tr><td>ajax</td></tr>
<tr><td>ajax</td></tr>
<tr><td>ajax</td></tr>
<tr><td>ajax</td></tr>--%>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var xmlHttp;
//获取用户输入内容的关联信息的函数
function getMoreContents() {
//1.首先要获得用户的输入
var content = document.getElementById("keyword");
if (content.value == "") {
clearContent();//按“Backspace”键时,清空提示框
return;
}
// alert(content.value)
//2.然后要给服务器发送用户输入的内容,因为我们采用的是Ajax异步发送数据,所有我们要使用一个对象,叫做XmlHttp对象
xmlHttp = createXmlHttp();
// alert(xmlHttp)
//3.要给服务器发送数据
var url = "search?keyword=" + escape(content.value);
/*escape(content.value):不加的话中文可能有问题*/
//true表示JavaScript脚本会在send()方法之后继续执行,而不会等待来自服务器的响应
xmlHttp.open("GET", url, true);
//4.xmlHttp绑定回掉方法,这个回掉方法会在xmlHttp状态改变的时候被调用
//xmlHttp的状态0-4,我们只关心4(complete)这个状态,当完成之后,在调用回调方法才有意义
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
//获得xmlHttp对象
function createXmlHttp() {
//对于大多数的浏览器都适用
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
//要考虑浏览器的兼容性
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlHttp) {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlHttp;
}
//回调函数
function callback() {
//“4”代表完成
if (xmlHttp.readyState == 4) {
//"200"代表服务器响应成功
if (xmlHttp.status == 200) {
//交互成功,获得相应的数据,是文本格式
var result = xmlHttp.responseText;
//解析获得的数据 java中的json和JS中的json有差别
var json = eval("(" + result + ")");
//5.获得数据之后,动态的显示这些数据,把其展示到输入框的下面
// alert(json);
setContent(json);
}
}
}
//设置关联数据的展示,参数代表的是服务器传递过来的关联数据
function setContent(contents) {
//先清空内容
clearContent();
setLocaltion();
//首先获得关联数据的长度,以此来确定生成多少<tr></tr>
var size = contents.length;
//设置内容
for (var i = 0; i < size; i++) {
var nextNode = contents[i];//代表的是json格式数据的第i个元素
var tr = document.createElement("tr");
var td = document.createElement("td");
td.setAttribute("border", "0");
td.setAttribute("bgcolor", "#FFFAFA");
td.onmousemove = function () {/*鼠标滑过事件*/
this.className = 'mouseOver';
}
td.onmouseout = function () {/*鼠标滑出事件*/
this.className = 'onmouseOut';
}
td.onclick = function () {
//当用鼠标点击一个关联的数据时,关联数据自动设置为输入框的数据
}
var text = document.createTextNode(nextNode);
td.appendChild(text);
tr.appendChild(td);
document.getElementById("content_table_body").appendChild(tr);
}
}
//清空之前的数据
function clearContent() {
var contentTableBody = document.getElementById("content_table_body");
var size = contentTableBody.childNodes.length;
for (var i = size - 1; i >= 0; i--) {
contentTableBody.removeChild(contentTableBody.childNodes[i]);
}
document.getElementById("popDiv").style.border = "none";
}
//失去焦点时,清空数据
function keywordBlur() {
clearContent()
}
//设置显示关联信息的显示位置
function setLocaltion() {
//关联信息的显示位置要和输入框一致
var content = document.getElementById("keyword");
var width = content.offsetWidth;//输出框的宽度
var left = content["offsetLeft"];//到左边框的距离
var top = content["offsetTop"] + content.offsetHeight;//到顶部的距离
//获取显示数据的div
var popDiv = document.getElementById("popDiv");
popDiv.style.border = "black 1px solid";
popDiv.style.left = left + "px";
popDiv.style.top = top + "px";
popDiv.style.width = width + "px";
document.getElementById("content_table").style.width = width + "px";
}
</script>
</body>
</html>
package com.search;
import net.sf.json.JSONArray;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
/**
* Created by zghgchao 2017/12/30 15:03
*/
public class SearchServlet extends HttpServlet {
static List<String> datas = new ArrayList<String>();
static {
//模拟数据
datas.add("ajax");
datas.add("ajax post");
datas.add("ajax get");
datas.add("bill");
datas.add("becky");
datas.add("james");
datas.add("jerry");
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
System.out.println("-------------请求服务器-------------");
//首先获得客户端发送来的数据keyword
String keyword = req.getParameter("keyword");
//获得关键字之后进行处理,得到关联数据
List<String> listData = getData(keyword);
//返回JSON格式
System.out.println(JSONArray.fromObject(listData));
JSONArray jsonArray = JSONArray.fromObject(listData);
resp.getWriter().write(jsonArray.toString());
}
//获得关联数据的方法
public List<String> getData(String keyword) {
List<String> list = new ArrayList<String>();
for (String data : datas) {
if (data.contains(keyword)) {
list.add(data);
}
}
return list;
}
}
web.xml
<web-app>
<display-name>Archetype Created Web Application</display-name>
<servlet>
<servlet-name>search</servlet-name>
<servlet-class>com.search.SearchServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>search</servlet-name>
<url-pattern>/search</url-pattern>
</servlet-mapping>
</web-app>
运行程序:
控制台输出: