前端代码：
代码语言：javascript复制<%@ 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>AjaxTest</title>
<style type="text/css">
#mydiv{
position:absolute;
left:50%;
top:50%;
margin-left: -250px;
margin-top: -150px;
}
.mouseOver{
background: #708090;
color:#FFFAFA;
}
.mouseOut{
background: #FFFAFA;
color:#000;
}
</style>
<script type="text/javascript">
var xmlHttp;
//1.获得用户输入内容的关联信息的函数
function getMoreContents(){
//首先获得用户输入
var content=document.getElementById("keyword")
if(content.value==""){
//当输入框为空时，清空之前的数据
clearContent();
return;
}
//2.然后要给服务器发送用户输入的内容,因为我们采用的是ajax异步发送数据，所以我们要使用xmlHttp对象
xmlHttp=createXMLHttp();
//alert(xmlHttp);
//3.要给服务器发送数据,首先定义一个服务器的地址，
var url="serach?keyword=" escape(content.value);
//true表示JavaScript脚本会在send()方法之后继续执行，而不会等待来自服务器的响应。
xmlHttp.open("GET",url,true);
//xmlHttp绑定回调方法，这个回调方法会在xmlHttp状态改变的时候会被调用
//xmlHttp的状态：0-4，我们只关心4(complete)这个状态，所以说当完成之后，再调用回调函数才有意义。
xmlHttp.onreadystatechange = callback;
//参数已经在url中了，不用在此处添加参数
xmlHttp.send(null);
}
//获得XmlHttp对象
function createXMLHttp(){
//对大多数浏览器都适用
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
//要考虑浏览器的兼容性
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
//如果浏览器没有xmlHttp时
if(!xmlHttp){
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlHttp;
}
//回调函数
function callback(){
//4代表完成
if(xmlHttp.readyState==4){
//200代表服务器响应成功，404代表资源未找到，500代表服务器内部错误
if(xmlHttp.status==200){
//交互成功，获得相应的数据，是文本格式。
var result=xmlHttp.responseText;
//解析获得数据
var json=eval("(" result ")");
//获得这些数据之后，就可以动态的显示数据了。把这些数据展示到输入框下面。
//alert(json);
setContent(json);
}
}
}
//设置关联数据的展示，参数代表服务器传递过来的关联数据
function setContent(contents){
//清空之前的数据
clearContent();
//设置位置
setLocation();
//首先获得关联数据的长度，以此来确定生成多少个<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绑定两个样式（鼠标进入和鼠标移出时事件）
td.onmouseover=function(){
this.className='mouseOver';
};
td.onmouseout=function(){
this.className="mouseOut";
};
/* td.onclick = function(){
//这个方法实现的是，当用鼠标点击一个关联数据时，关联数据自动填充到输入框中。
document.getElementById("keyword").value =this.innerText;
}; */
td.onmousedown = function(){
//当鼠标点击一个关联数据时，自动在输入框添加数据
document.getElementById("keyword").value =this.innerText;
};
//鼠标悬浮于关联数据上时，自动添加到输入框中
/* td.onmouseover = function(){
this.className = 'mouseOver';
if(td.innerText != null)
document.getElementById("keyword").value =this.innerText;
} */
//创建一个文本节点
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--){
//指定删除第i个子节点
contentTableBody.removeChild(contentTableBody.childNodes[i]);
}
//清除关联数据的外边框
document.getElementById("popDiv").style.border="none";
}
//当输入框失去焦点的时候，输入框的关联信息清空
function keywordBlur(){
clearContent();
}
//设置显示关联信息的位置
function setLocation(){
//关联信息的显示位置要和输入框一致
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.booder="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="50%"/>
<!-- 下面是内容展示的区域 -->
<div id="popDiv">
<table id="content_table" bgcolor="#FFFAFA" border="0" >
<tbody id="content_table_body">
<!-- 动态查询出来的数据 -->
</tbody>
</table>
</div>
</div>
</body>
</html>后端代码：
代码语言：javascript复制package com.java;
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;
/**
*
* @author 李先森 --2017.2.21
*
*/
public class SerachServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
//定义一个容器,存放模拟数据
static List<String> datas = new ArrayList<String>();
static{
datas.add("ajax");
datas.add("ajax提交form表单");
datas.add("ajax教程");
datas.add("baidu");
datas.add("bt");
datas.add("byte");
datas.add("jstl");
datas.add("jstsl");
datas.add("jsatl");
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置字符编码格式
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//首先获得客户端发送来的数据(keyword)
String keyword = request.getParameter("keyword");
//获得关键字之后进行处理，得到关联数据
List<String> listData = getData(keyword);
// System.out.println(JSONArray.fromObject(listData));
// JSONArray.fromObject(listData);
//返回json格式
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)){
list.add(data);
}
}
return list;
}
}完成后的效果：
可以用到自己的项目中去，为项目增加更好的效果。
每天
进步一点点
万水千山总是情，点个 “在看” 行不行
