1.显示主页面内容
<body>
<div id="mydiv">
<input type="text" size="50" id="keyword" onkeyup="getMoreContent()" onblur="keywordBlur()" onfocus="getMoreContent()"/>
<input type="button" value="搜索"/><br>
<!-- 内容展示 -->
<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>
2.css配置
<style type="text/css">
#mydiv{
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-50px;
}
.mouseOver{
background:#708090;
color:#000000;
}
.mouseOut{
background:#FFFAFA;
color:#000000;
}
</style>
3.js配置
<script type="text/javascript">
function getMoreContent(){
//首先获取用户输入
var content=document.getElementById("keyword");
if(content.value==""){
clearContent(); //清除输入内容的同时清除popdiv中的内容
return ;
}
var xh=createXMLHttp(); //获取XMLHttp对象
var url="SearchServlet?keyword="+escape(content.value);
xh.onreadystatechange=function(){
if(xh.readyState==4){
if(xh.status==200){
var result=xh.responseText;
var info=JSON.parse(result);
setContent(info);
}
}
}
//true表示javascrip脚本会在send()方法之后继续执行，而不会等待来自服务器的响应
xh.open("GET",url,true);
xh.send(null);
}
//适合绝大多数浏览器
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 setContent(contents){
clearContent();
setLocation(); //美化表格
var size=contents.length;
for(var i=0;i<size;i++){
var nextNode=contents[i];
var tr=document.createElement("tr");
var td=document.createElement("td");
td.setAttribute("border","0");
td.setAttribute("bgcolor","#FFFAFA");
td.onmouseover=function(){
this.setAttribute('class', 'mouseOver') ;
};
td.onmouseout=function(){
this.setAttribute('class', 'mouseOut') ;
};
td.onclick=function(){
};
var text=document.createTextNode(nextNode);
td.appendChild(text);
tr.appendChild(td);
document.getElementById("content_table_body").appendChild(tr);
}
}
//美化
function setLocation(){
var content=document.getElementById("keyword");
var width=content.offsetWidth; //输入框的宽度
var left=content["offsetLeft"];
var top=content["offsetTop"]+content.offsetHeight;
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";
}
//清除
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();
}
</script>
4.Servlet配置
package com.ajaxtest;
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 net.sf.json.JSONArray;
/**
* Servlet implementation class SearchServlet
*/
@WebServlet("/SearchServlet")
public class SearchServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public SearchServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String keyword=request.getParameter("keyword");
List<String> list=getData(keyword);
//System.out.println(JSONArray.fromObject(list).toString());
response.getWriter().write(JSONArray.fromObject(list).toString());
}
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");
}
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;
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}