学的不好继续努力！！-原创手记-慕课网

<%@ 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;
}

popdiv{

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;
}

}