ajax搜索自动提示,AJAX搜索自动提示

首页(ajax.jsp)

搜索自动提示

AJAX实现搜索提示

服务端(SuggestServlet.java)

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 java.io.IOException;

import java.io.PrintWriter;

import java.util.ArrayList;

import java.util.List;

@WebServlet( "/Suggest")

public class SuggestServlet extends HttpServlet {

private Listdb=new ArrayList();

public SuggestServlet(){

super();

db.add("eclipse");

db.add("myeclipse");

db.add("java");

db.add("javaweb");

db.add("javaee");

}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//设置编码

request.setCharacterEncoding("UTF-8");

response.setContentType("text/html;charset=UTF-8");

response.setCharacterEncoding("UTF-8");

PrintWriter out = response.getWriter();

//获取搜索关键字

String key=request.getParameter("key");

//模仿从数据库检索数据

String rs="";

if(!key.equals("")){

for (int i=0;i

CSS样式

@CHARSET "UTF-8";

body {

font: 16px arial;

}

.suggest_link {

background-color: #ffffff;

padding: 2px 6px 2px 6px;

}

.suggest_link_over {

background-color: #e5e5e5;

padding: 2px 6px 2px 6px;

}

#suggest {

position: absolute;

background-color: #FFFFFF;

text-align: left;

border: 2px solid #bebebe;

display: none;

}

3、结果展示

4、整理过程