java ajax搜索提示_Servlet+Ajax实现搜索框智能提示

先建一个web项目

s.jsp为web请求页面，/search为ajax请求地址。

s.jsp

pageEncoding="UTF-8"%>

#mydiv {

position: absolute;

left:50%;

top: 50%;

margin-left: -200px;

margin-top: -50px;

}

.mouseOver {

background: #708090;

color: #FFFAFA;

}

.mouseOut {

background: #FFFAFA;

color: #000000;

}

//活动用户关联信息的函数

function getMoreContents(){

//xmlHttp

var xmlHttp;

//首先要获得用户输入

var content = document.getElementById("keyword");

if(content.value=="") {

//如果元素是空，也可清空一下

clearContent();

return;

}

//alert(content.value);

//然后给服务器发送数据

//需要一个xmlHttp对象

xmlHttp=createXmlHttp();

//alert(xmlHttp);

//var url="search?keyword="+escape(content.value);

var url="search?keyword="+content.value;

//true表示在调用send()方法后会继续执行

xmlHttp.open("GET",url,true);

//xmlHttp绑定的回调方法，这个回调方法会在xmlHttp状态改变时被调用

//xmlhttp状态0-4，我们只关心4.完成之后再回调才有意义

xmlHttp.onreadystatechange=callback;

xmlHttp.send(null);

function callback() {

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

//获得数据

var result=xmlHttp.responseText;

//解析数据

var json=eval("("+result+")");

//获得数据后就可以动态的展示数据到输入框的下面

//alert(json);

setContent(json);

}

}

}

}

function createXmlHttp() {

var xmlHttp;

if(window.XMLHttpRequest) {

xmlHttp=new XMLHttpRequest();

}

if(window.ActiveXObject) {

xmlHttp=new ActiveXObject("MircoSoft.XMLHTTP");

if(!xmlHttp) {

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

}

return xmlHttp;

}

//设置展示数据

function setContent(contents) {

//设置数据前先清空

clearContent();

//设置显示位置

setLocation();

var size=contents.length;

for(var i=0; i

var nextNode=contents[i];

var tr=document.createElement("tr");

var td=document.createElement("td");

td.setAttribute("border", "0");

td.setAttribute("bgcolor", "#FFFAFA");

td.οnmοuseοver=function() {

console.log('mouseover')

console.log(this)

this.className='mouseOver';

};

td.οnmοuseοut=function(){

console.log('mouseout')

console.log(this)

this.className='mouseOut';

};

td.οnclick=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 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";

}

s

cellspacing="0" cellpadding="0">

SearchServlet.java

package ajaxTest.servlet;

import java.io.IOException;

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 com.alibaba.fastjson.JSONArray;

import ajaxTest.data.DataResource;

/**

* Servlet implementation class SearchServlet

*/

@WebServlet("/search")

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 {

// TODO Auto-generated method stub

request.setCharacterEncoding("UTF-8");

response.setCharacterEncoding("UTF-8");

System.out.println("-----");

String keyword = "";

keyword = request.getParameter("keyword");

System.out.println("keyword: " + keyword);

DataResource dataResource = new DataResource();

List list = dataResource.getData(keyword);

System.out.println( JSONArray.toJSON(list) );

response.getWriter().write( JSONArray.toJSON(list).toString() );

}

/**

* @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);

}

}

DataResource.java

package ajaxTest.data;

import java.io.BufferedReader;

import java.io.IOException;

import java.io.InputStream;

import java.io.InputStreamReader;

import java.net.URL;

import java.util.ArrayList;

import java.util.List;

import javax.el.ArrayELResolver;

public class DataResource {

private static List dataList = new ArrayList<>();

URL fileUrl = DataResource.class.getResource("data.txt");

static {

InputStream inputStream = DataResource.class.getResourceAsStream("/data.txt");

InputStreamReader inputStreamReader = new InputStreamReader(inputStream);

BufferedReader bufferedReader = new BufferedReader(inputStreamReader);

String line = null;

try {

line = bufferedReader.readLine();

while (line != null) {

if(line.isEmpty()) {

} else {

System.out.println("line:" + line);

dataList.add(line);

}

line = bufferedReader.readLine();

}

} catch (IOException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

}

public List getData(String string) {

List data = new ArrayList<>();

for(String sdata: dataList) {

if(sdata.contains(string)) {

data.add(sdata);

}

}

System.out.println("data:" + data);

return data;

}

}

所有的数据放在/data.txt

DataResource.java是来读取所有的数据，这个类还又一个方法getData(string str)就会根据传入的数据返回一个json数据。使用的是fastjson.

结构如同：

结果如图：