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;
/**
* ${DESCRIPTION}
*
* @author shenyahui
* @create 2018-02-23 16:43
**/
public class SearchServlet extends HttpServlet {
static List<String> datas = new ArrayList<String>();
//模拟数据
static {
datas.add("ajax");
datas.add("ajax post");
datas.add("becky");
datas.add("bill");
datas.add("james");
datas.add("jerry");
datas.add("hao");
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//转换格式
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
System.out.println("123");
//首先获得客户端发来的数据keyword
String keyword = request.getParameter("keyword");
//获得关键字之后进行处理，得到关联数据
List<String> listData = getDatas(keyword);
//返回json格式
//System.out.print(JSONArray.fromObject(listData));
response.getWriter().write(JSONArray.fromObject(listData).toString());
}
//获得关联数据
public List<String> getDatas(String keyword){
List<String> list = new ArrayList<String>();
for (String data:datas) {
if(data.contains(keyword)){
list.add(data);
}
}
return list;
}
}<%--
Created by IntelliJ IDEA.
User: htcs
Date: 2018/2/23
Time: 11:37
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>搜索框只能查询Demo</title>
<style type="text/css">
#mydiv{
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -50px;
}
</style>
<script type="text/javascript">
//后面要多次使用所以定义为全局变量
var xmlHttp;
//获取用户输入内容的管理信息的函数
function getMoreContents() {
//首先获取用户的输入
var content = document.getElementById("keyword");
if (content.value == "") {
return;
}
//然后要给服务器发送用户输入的内容，因为我们采用的是ajax异步发送数据，
//所以我们要使用一个对象，叫做XmlHttp对象
xmlHttp = createXMLHttp();//获得XMLHttp对象;
//要给服务器发送数据,escape是为了保持中文
var url = "search?keyword=" + escape(content.value);
//true表示JavaScript脚本会在send（）方法后继续执行，而不会等待来自服务器的响应
xmlHttp.open("GET",url,true);
//xmlHttp绑定回调方法，这个回调方法会在xmlHttp状态改变的时候被调用
//xmlHttp的状态有0-4.我们只关心4即complete交互完成
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
//获取XmlHttp对象
function createXMLHttp() {
var xmlHttp;
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代表完成，200代表响应成功
if(xmlHttp.readyState==4){
if (xmlHttp.status==200){
//交互成功，获得响应的数据是文本形式
var result = xmlHttp.responseText;
//解析获得数据
var json = eval("("+result+")");
//获取数据后动态显示 展示输入框下面
//setContent(json);
alert(json);
}
}
}
//设置关联数据展示，参数代表的是服务器传递过来的关联数据
function setContent(contents) {
//首先获取关联数据的长度，以此来确定生成多少<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.onmouseover=function () {
this.className = 'mouseOver';
};
td.onmouseout=function () {
this.className = 'mouseOut';
};
td.onclick=function () {
//当鼠标点击一个关联数据时，关联数据自动设置为输入框数据
};
//放文本内容，然后层层传递，动态生成数据
var text = document.createTextNode(nextNode);
td.appendChild(text);
tr.appendChild(td);
document.getElementById("content_table_body").appendChild(tr);
}
}
</script>
</head>
<body>
<div id="mydiv">
<%--输入框--%>
<input type="text" size="50" id="keyword" onkeyup="getMoreContents()"/>
<%--按钮--%>
<input type="button" value="百度一下" width="50px"/>
<%--展示区域--%>
<div id="popDiv">
<table id="content_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0">
<tbody id="content_table_body">
<%--动态查询出来的数据,显示在此--%>
</tbody>
</table>
</div>
</div>
</body>
</html>
