<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<html>
<head>
<title>Insert title here</title>
<style type="text/css">
#mydiv{
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-50px;
}
.mouseOver{
background:#708090;
color:#FFAFA;
}
.mouseOut{
background:#FFAFA;
color:#000000;
}
</style>
<script type="text/javascript">
var xmlHttp;
function getMoreContents(){
var content=document.getElementById("keyword");
if(content.value==""){
clearContent();
return;
}
xmlHttp=getXmlHttpObject();
// alert(xmlHttp);
var url="search?keyword="+escape(content.value);
//true 表示js脚本会在send()方法之后继续执行,而不会等待来自服务器的响应
xmlHttp.open("GET",url,true)
//xmlHttp绑定回调方法,这个回调方法会在xmlHttp状态改变的时候被调用
//xmlHttp的状态0-4 ,我们只关心4(complete)这个状态,所以说完整之后再调用回调方法才有意义
xmlHttp.onreadystatechange=callback();
xmmlHttp.send(null);
alert(xmlHttp);
}
function getXmlHttpObject(){
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(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//交互成功,获得相应的数据,是文本格式(json)
var result=xmlHttp.responseText;
//解析获得json数据
var json =eval("("+result+")");
//获得数据之后,就可以动态显示这些数据了,展示到输入框下面
alert(json);
setContent(json);
}
}
}
function setContent(contents){
clearContent();
setLocaton();
var size=contans.length;
for(var i=0;i<size;i++){
var nextNode=contans[i];
var tr=document.createElement("tr");
var td=document.createElement("td");
td.setAttribute("border","0");
td.setAtrribute("bgcolor","#FFFAA");
td.omnmouseover=function(){
this.calssName="mouseOver";
};
td.onmouseout=function(){
this.calssName="mouseOut";
};
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 setLocaton(){
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>
</head>
<body>
<div id="mydiv">
<input type="text" size="50" id="keyword" onkeyup="getMoreContents()"
onblur="keywordBlur()" onfocus="getMoreContents()"/>
<input type="button" value="百度一下" width="50px"/>
<!-- 下面是内容展示区域 -->
<div id="popDiv">
<table id="content_table" bgcolor="#FFAFA" border="0" cellspacing="0"
cellpadding="0">
<tbody id="content_table_body">
<!-- 动态查询的数据显示在这里 -->
<!-- <tr><td>ajax</td></tr>
<tr><td>ajax2</td></tr>
<tr><td>ajax1</td></tr> -->
</tbody>
</table>
</div>
</div>
</body>
</html>
package com.Serach;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class SearchServlet extends HttpServlet {
public static List<String> datas=new ArrayList<String>();
static{
datas.add("ajax");
datas.add("ajax2");
datas.add("ajax3");
datas.add("ajax4");
datas.add("ajax5");
datas.add("ajax6");
datas.add("ajax7");
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
System.out.println("123");
String keyword =request.getParameter("keyword");
List<String> listData=getData(keyword);
JSONArray.fromObject(listData);
// System.out.println(JSONArray.fromObject(listData));
response.getWriter().write(JSONArray.fromObject(listData).toString());
}
public List<String> getData(String keyword){
List<String> list =new ArrayList<String>();
for(String data:datas){
if(data.contains(keyword)){
return datas;
}
}
return null;
}
}