<%@ 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">
.over{
background:#CCC;
}
position:absolute;
}
</style>
<script type="text/javascript">
var XmlHttp;//设置 ajax 全局对象名字
function show(){//输入框数值改变就会调用这个方法
var text = document.getElementById("text");//获得输入框的节点
if(text.value==""){//判断输入框的值是否为空
deleteTable();//删除之前返回来的数值
return;//并把 空 返回
}
var url = "ser/Servlet?Mytext="+escape(text.value);//让所有计算机都可以识别这个字符串
XmlHttp = createXmlHttp();//判断每个计算机上面所能接受的ajax的方法
XmlHttp.open("GET",url,true);//提交给服务器
XmlHttp.onreadystatechange = callback;//回调函数 服务器会把值返回来
XmlHttp.send(null);//发送请求
}
function callback(){
if(XmlHttp.readyState == 4 && XmlHttp.status == 200){//200表示服务器正常响应了客户端的请求 4表示响应完成客户端可以正常调用数值
var XmlText = XmlHttp.responseText;//获得servlet中的数值
var json = eval("(" + XmlText + ")");//转化成JavaScript能识别的json
createTable(json);//编学方法 创建表单
}
}
function createTable(json){
deleteTable();//删除方法
add();//为表单添加样式的方法
var name;//记录表单中单元格的初始样式 className
var len = json.length;//获得json数值的长度 方便知道创建几行单元格
if(len==0){
deleteTable();//当数值长度为0时 隐藏表单中的样式
}
var text = document.getElementById("text");//获得输入框节点
var Width = text.offsetWidth;//获得 输入框的宽度
var div = document.getElementById("popdiv");//获得popdiv节点
var tab = document.createElement("table");//创建一个table节点
for(var x=0;x<len;x++){//循环创建表单中的单元行与单元格
var tr = tab.insertRow();//在表单中创建 单元行
var td = tr.insertCell();//在表单中创建单元行
td.innerHTML = json[x];//把数值赋给单元格
td.onmouseover = function(){//鼠标光标进入事情就被触发
name = td.className;//把初始样式赋给之前创建的name
this.className = "over";//把over样式赋给当前事件
}
td.onmouseout = function(){//鼠标光标离开事情就被触发
this.className = name;//把初始样式赋给当前事件
}
td.onmousedown = function(){//鼠标按下事件
var tex = document.getElementById("text");//获得输入框节点
tex.value = this.innerHTML;//把当前值赋给输入框
}
}
div.appendChild(tab);//把创建的table节点 在div节点后面插入
tab.style.width = Width +"px";//设置表单的宽度
tab.style.borderCollapse=0+"px";//表单的行距
tab.style.borderSpacing =0+"px";//表单的间距
}
function deleteTable(){//删除表单的方法
var div = document.getElementById("popdiv");//获得div节点
var size = div.childNodes.length;//获得DIV下子节点的长度
for(var x = size-1;x>0;x--){//循环遍历删除子节点 因为是树装关系 所以需要从后删除
div.removeChild(div.childNodes[x]);
}
//隐藏DIV的边框样式
document.getElementById("popdiv").style.border = "none";
}
function createXmlHttp(){//创建判断ajax各个计算机的方法
var xml;
if(window.XMLHttpRequest){
xml = new XMLHttpRequest();
}
if(window.ActiveXObject){
xml = new ActiveXObject("Microsort.XMLHTTP");
if(!xml){
xml = new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xml;
}
function add(){//设置DIV的样式
var div = document.getElementById("popdiv");
var text = document.getElementById("text");
var Width = text.offsetWidth;//获得输入框的宽度
var left = text["offsetLeft"];//获得输入框离左边的距离
var top = text["offsetTop"] + text.offsetHeight;//获得输入框离上边的距离
div.style.border = "#999 solid 1px";//样式设置
div.style.marginLeft = left-10 + "px";
div.style.top = top + "px";
div.style.width = Width + "px";
}</script>
</head>
<body>
<center>
<input type="text" id="text" size="40" onkeyup="show()" onblur="deleteTable()" onfocus="show()">
<input type="button" value="百度一下">
</center>
<div id="popdiv">
</div>
</body>
</html>
servlet类
import java.io.IOException;
import java.util.ArrayList;
import javax.el.ArrayELResolver;
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 Servlet extends HttpServlet {
static ArrayList<String> list = new ArrayList<String>();
static{
list.add("ajax1");
list.add("lisi");
list.add("wangma");
list.add("wuregou");
list.add("zheishi");
list.add("ajax2");
list.add("ajax3");
list.add("wangccai");
list.add("haiyou");
list.add("nishi");
list.add("ddzz");
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String str = request.getParameter("Mytext");
ArrayList<String> al= getList(str);
JSONArray jso = JSONArray.fromObject(al);
response.getWriter().write(jso.toString());
}
public ArrayList<String> getList(String str){
ArrayList<String> li = new ArrayList<String>();
for (String st : list) {
if(st.contains(str)){//判断st字符串中是否包含 str字符串
li.add(st);
}
}
return li;
}}