（转）自动补全-优快云博客

本文介绍了一个基于Servlet和JQuery的自动补全功能实现方案，包括前端页面设计、Servlet处理逻辑及XML数据响应等关键部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Servlet代码

/**
* Servlet
*/
package com.wll.autoComplete;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 自动补全功能
* 接收用户端请求
* @author wll
*
*/
public class AutoComplete extends HttpServlet {
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
//表示页面传过来的字符串，用于和服务器端的单词进行完整匹配
String word = request.getParameter("word");
//将字符串保存在request对象中
request.setAttribute(Contants.PARAM, word);
//将请求转发给视图层(注意AJAX中，这个所谓的视图层不返回页面，只返回数据，所以也可以称作是一个数据层)
request.getRequestDispatcher("wordxml.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}

/**
 * Servlet
 */
package com.wll.autoComplete;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 自动补全功能
 * 接收用户端请求
 * @author wll
 *
 */
public class AutoComplete extends HttpServlet {
	protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
		//表示页面传过来的字符串，用于和服务器端的单词进行完整匹配
		String word = request.getParameter("word");
		//将字符串保存在request对象中
		request.setAttribute(Contants.PARAM, word);
		//将请求转发给视图层(注意AJAX中，这个所谓的视图层不返回页面，只返回数据，所以也可以称作是一个数据层)
		request.getRequestDispatcher("wordxml.jsp").forward(request, response);
	}
	protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
		doGet(request,response);
	}
}

常量类代码

/**
*
*/
package com.wll.autoComplete;
/**
* 常类
*
* @author wll
*
*/
public class Contants {
public static final String PARAM = "param";
private Contants() {
}
}

/**
 * 
 */
package com.wll.autoComplete;

/**
 * 常类
 * 
 * @author wll
 * 
 */
public class Contants {
	public static final String PARAM = "param";

	private Contants() {

	}
}

Jsp代码

<%@ page language="java" import="java.util.*"
pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQuery自动补全</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryAuto.js"></script>
</head>
<body>
JQuery实例-自动补全：<input type="text" id="word" name="word" />
<input type="button" id="buttonSubmit"
name="buttonSubmit" value="提交" /><br />
<div id="auto"></div>
</body>
</html>

<%@ page language="java" import="java.util.*"
 pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>JQuery自动补全</title>
 <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jqueryAuto.js"></script>
  </head>
  
  <body>
    JQuery实例-自动补全：<input type="text" id="word" name="word" />
    <input type="button" id="buttonSubmit"
     name="buttonSubmit" value="提交" /><br />
  	<div id="auto"></div>
  </body>
</html>

输出结果的xml代码

<%@ page language="java" contentType="text/xml;charset=utf-8" %>
<%@page import="com.wll.autoComplete.Contants,java.util.*"%>
<!-- 返回xml数据的'视图层暂时不做任何逻辑判断，先所有单词都返回，
待前后台应用可以完整的协作之后，再限制返回的内容' -->
<%
//页面传送的字符串
String word = (String)request.getAttribute(Contants.PARAM);
List list = new ArrayList();
list.add("absolute");
list.add("anyone");
list.add("apple");
list.add("abandon");
list.add("breach");
list.add("break");
list.add("bad");
list.add("char");
list.add("create");
list.add("delete");
list.add("java");
list.add("attribute");
%>
<words>
<%
for(int i = 0;i < list.size();i ++) {
if(list.get(i).toString().startsWith(word)) {%>
<word><%=list.get(i)%></word>
<%}}%>
</words>

<!-- ajax自动补全实例 -->
<!-- 与传统应用的视图层不同，这个jsp返回的是xml数据，因此contentType值是text/xml -->
<%@ page language="java" contentType="text/xml;charset=utf-8" %>
<%@page import="com.wll.autoComplete.Contants,java.util.*"%>
<!-- 返回xml数据的'视图层暂时不做任何逻辑判断，先所有单词都返回，
待前后台应用可以完整的协作之后 ，再限制返回的内容' -->
<%
	//页面传送的字符串
	String word = (String)request.getAttribute(Contants.PARAM);
	List list = new ArrayList();
	list.add("absolute");
	list.add("anyone");
	list.add("apple");
	list.add("abandon");
	list.add("breach");
	list.add("break");
	list.add("bad");
	list.add("char");
	list.add("create");
	list.add("delete");
	list.add("java");
	list.add("attribute");
%>
<words>
	<%
	for(int i = 0;i < list.size();i ++) {
	if(list.get(i).toString().startsWith(word)) {%>
		<word><%=list.get(i)%></word>
	<%}}%>
</words>

Web.xml代码

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>AutoComplete</servlet-name>
<servlet-class>com.wll.autoComplete.AutoComplete</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AutoComplete</servlet-name>
<url-pattern>/autoComplete</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	
  <servlet>
  	<servlet-name>AutoComplete</servlet-name>
  	<servlet-class>com.wll.autoComplete.AutoComplete</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>AutoComplete</servlet-name>
  	<url-pattern>/autoComplete</url-pattern>
  </servlet-mapping>
  
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

Js 代码代码