AJAX搜索自动提示

首页（ajax.jsp）

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/8/9
  Time: 18:29
  To change this template use File | Settings | File Templates.
  求精要诀P358
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    

    
    



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 List db=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、整理过程