Servlet+Ajax实现搜索智能提示的案例网上很多，先贴上自己使用的代码。
index.jsp
<%@ 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>smart search</title><style type="text/css">.mouseOver { ???background: #00B2EE; ???color: white; ???width: 200px;}.mouseOut { ???background: #EDEDED; ???width: 200px;}</style><script type="text/javascript"> ???????var xmlHttp; ???//获取用户输入的关联信息的函数 ???function getMoreContens() { ???????//获取用户输入 ???????var content = document.getElementById("keyWords").value; ???????if (content == "") { ???????????clearContent(); ???????????return; ???????} ???????xmlHttp = createXmlHttp(); ???????//给服务器发送数据 ???????var url = "search?keyword="+encodeURI(content); ????????xmlHttp.open("GET",url,true); ???????xmlHttp.onreadystatechange = ????//回调函数 ???????????function callback() ???????{ ???????????if(xmlHttp.readyState == 4) ???????????????{ ???????????????if(xmlHttp.status == 200){ ???????????????????var result = decodeURIComponent(xmlHttp.responseText); ???????????????????var json = eval("("+result+")"); ???????????????????clearContent(json); ???????????????????intelliSense(json); ???????????????} ???????????????} ???????}; ???????/* ???????????xmlhttp的send是传递参数用的,但是只有在使用post方式提交请求的时候才有用 ???????????如下: ???????????xmlhttp.open("post",url,true); ????????????... ???????????xmlhttp.send("data=data&data2=data2"); ????????????????????????用get的话一般就是： ???????????xmlhttp.open("get",url,true); ????????????... ???????????xmlhttp.send(null); ???????*/ ???????xmlHttp.send(null); ???} ???????//创建XMLHttpRequest ???function createXmlHttp() ???{ ???????var xmlHttp; ???????if(window.XMLHttpRequest) ???????????{ ???????????xmlHttp = new XMLHttpRequest(); ???????????//兼容某些Mozilla浏览器的响应头，强制设置为text/xml，具体参看：http://www.cnblogs.com/perseverancevictory/p/3690769.html ??????????????if(xmlHttp.overrideMimeType){ ????????????????????xmlHttp.overrideMimeType("text/xml"); ??????????????} ???????????} ???????//兼容IE ???????else if(window.ActiveXObject) ???????????{ ???????????xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); ???????????if(!xmlHttp) ???????????????{ ???????????????xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); ???????????????} ???????????} ???????return xmlHttp; ???} ???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]); ???????????} ???} ???function intelliSense(json) ???{ ???????//获取关联数据的长度 ???????var size = json.length; ???????for(var i=0;i<size;i++) ???????????{ ???????????var nextNode = json[i]; ???????????var tr= document.createElement("tr"); ???????????var td= document.createElement("td"); ???????????tr.setAttribute("border", "0"); ???????????tr.setAttribute("bgcolor", "#EDEDED"); ???????????td.setAttribute("width", "200px"); ???????????td.onmouseover=function() ???????????{ ???????????????this.className = ‘mouseOver‘; ???????????} ???????????td.onmouseout=function() ???????????{ ???????????????this.className = ‘mouseOut‘; ???????????} ???????????td.onclick=function() ???????????{ ???????????????document.getElementById("keyWords").value=this.innerText; ???????????} ???????????var text=document.createTextNode(nextNode); ???????????td.appendChild(text); ???????????tr.appendChild(td); ???????????document.getElementById("content_table_body").appendChild(tr); ???????????} ???}</script></head><body> ???<div> ???????<input type="text" ?name="keyWords" id="keyWords" ?style="width:200px; height:20px;" onkeyup="getMoreContens()" onfocus="getMoreContens()" onblur="clearContent()" /> <input ???????????type="button" id="button" value="百度一下"> ???????????<div id="popDiv"> ???????????<table id="content_table"> ???????????????<tbody id="content_table_body"> ???????????????</tbody> ???????????</table> ???????</div> ???</div></body></html>web.xml
<?xml version="1.0" encoding="UTF-8"?><web-app id="WebApp_ID" version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"><welcome-file-list> ???<welcome-file>index.jsp</welcome-file></welcome-file-list><servlet-mapping> ???<servlet-name>search</servlet-name> ???<url-pattern>/search</url-pattern></servlet-mapping><servlet> ???<description>搜索</description> ???<servlet-name>search</servlet-name> ???<servlet-class>com.baorant.search.SearchServlet</servlet-class></servlet> </web-app>
SearchServlet类
package com.baorant.search;import java.io.IOException;import java.net.URLEncoder;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 com.alibaba.fastjson.JSON;public class SearchServlet extends HttpServlet { ???private static List<String> keyWordList = new ArrayList<String>(); ???static { ???????// 模拟数据 ???????keyWordList.add("yanwei"); ???????keyWordList.add("yantian"); ???????keyWordList.add("yanpeng"); ???????keyWordList.add("yanweichao"); ???????keyWordList.add("yanweiqi"); ???????keyWordList.add("yanyurong"); ???????keyWordList.add("yanmeirong"); ???????keyWordList.add("yanweichen"); ???????keyWordList.add("电影"); ???????keyWordList.add("电影 66ys"); ???} ???private static final long serialVersionUID = 1L; ???@Override ???protected void doPost(HttpServletRequest req, HttpServletResponse resp) ???????????throws ServletException, IOException { ???????doGet(req, resp); ???} ???@Override ???protected void doGet(HttpServletRequest req, HttpServletResponse resp) ???????????throws ServletException, IOException { ???????String keyWord = req.getParameter("keyword"); ???????System.out.println(keyWord); ???????List<String> list = keyWord==null?new ArrayList<String>():getDatas(keyWord); ???????String json = JSON.toJSONString(list); ???????//防止乱码 ???????String encodeJSON = URLEncoder.encode(json,"UTF-8"); ???????resp.getWriter().write(encodeJSON); ???} ???public static List<String> getDatas(String keyWord) { ???????List<String> list = new ArrayList<String>(); ???????for (int i = 0; i < keyWordList.size(); i++) { ???????????if (keyWordList.get(i).contains(keyWord)) { ???????????????list.add(keyWordList.get(i)); ???????????} ???????} ???????return list; ???}}已直接从工程build path导入fastjson-1.2.2.jar，但仍然报错：java.lang.ClassNotFoundException: com.alibaba.fastjson.JSON
解决方法：将之前直接导入的jar包复制放入项目中lib目录下，重新编译，成功！
Servlet+Ajax实现搜索智能提示及遇到的问题
原文地址：https://www.cnblogs.com/baorantHome/p/9065538.html