效果截图：
视频效果：
静态提交页面：autoComplete.html
<!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>AJAX自动完成技术</title>
<style type="text/css">
.mouSEOut{
background:#708090;
color:#FFFAFA;
}
.mouSEOver{
background:#FFFAFA;
color:#000000;
}
</style>
<script type="text/javascript">
var xmlHttp;
var completeDiv;
var inputField;
var naMetable;
var naMetableBody;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function initVars(){
inputField=document.getElementById("names");
naMetable=document.getElementById("name_table");
completeDiv=document.getElementById("popup");
naMetableBody=document.getElementById("name_table_body");
}
function findNames(){
initVars();
if(inputField.value.length>0){
createXMLHttpRequest();
var url="servlet/AutoCompleteServlet?names="+escape(inputField.value);
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}else{
clearNames();
}
}
function callback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var name=xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;
setNames(xmlHttp.responseXML.getElementsByTagName("name"));
}else if(xmlHttp.status==204){
clearNames();
}
}
}
function setNames(the_names){
clearNames();
var size=the_names.length;
setOffsets();
var row,cell,txtNode;
for(var i=0;i<size;i++){
var nextNode=the_names[i].firstChild.data;
row=document.createElement("tr");
cell=document.createElement("td");
cell.setAttribute("bgcolor","#FFFAFA");
cell.setAttribute("border","0");
cell.onclick=function(){populateName(this);};
txtNode=document.createTextNode(nextNode);
cell.appendChild(txtNode);
row.appendChild(cell);
naMetableBody.appendChild(row);
}
}
function setOffsets(){
var end=inputField.offsetWidth;
var left=calculateOffsetLeft(inputField);
var top=calculateOffsetTop(inputField)+inputField.offsetHeight;
completeDiv.style.border="black 1px solid";
completeDiv.style.left=left+"px";
completeDiv.style.top=top+"px";
naMetable.style.width=end+"px";
}
function calculateOffsetLeft(field){
return calculateOffset(field,"offsetLeft");
}
function calculateOffsetTop(field){
return calculateOffset(field,"offsetTop");
}
function calculateOffset(field,attr){
var offset=0;
while(field){
offset+=field[attr];
field=field.offsetParent;
}
return offset;
}
function populateName(cell){
inputField.value=cell.firstChild.nodeValue;
clearNames();
}
function clearNames(){
var ind=naMetableBody.childNodes.length;
for(var i=ind-1;i>=0;i--){
}
completeDiv.style.border="none";
}
</script>
</head>
<body bgcolor="#CCFFFF">
<h1>Ajax 自动完成技术</h1>
请输入关键字：<input type="text" size="20" id="names" onkeyup="findNames();" style="height:20;"/><input type="button" value="百度一下" onClick="alert('你还真以为这是百度啊？O(∩_∩)O~');"/>
<div style="position:absolute;" id="popup">
<table id="name_table" bgcolor="FFFAFA" border="0" cellspacing="0" cellpadding="0"/>
<tbody id="name_table_body"></tbody>
</table>
</div>
</body>
</html>
处理的Servlet：AutoCompleteServlet.java
package servlet;
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class AutoCompleteServlet extends HttpServlet{
private List names=new ArrayList();
public void init(ServletConfig config)throws ServletException{
names.add("li");
names.add("lishi");
names.add("lishirong");
names.add("lishirongand");
names.add("lishirongandRicky");
names.add("huang");
names.add("huangliang");
names.add("huangliangand");
names.add("huangliangandRicky");
names.add("huangliangandlishirong");
names.add("lishirongandcto");
}
protected void doGet(HttpServletRequest request,HttpServletResponse response)
throws IOException,ServletException{
String prefix=request.getParameter("names");
NameService service=NameService.getInstance(names);
List matching=service.findNames(prefix);
if(matching.size()>0){
PrintWriter out=response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
out.println("<response>");
Iterator iter=matching.iterator();
while(iter.hasNext()){
String name=(String)iter.next();
out.println("<name>"+name+"</name>");
}
out.println("</response>");
matching=null;
service=null;
out.close();
}else{
response.setStatus(HttpServletResponse.SC_NO_CONTENT);
}
}
}
另外一个处理类：NameService.java
package servlet;
import java.util.*;
public class NameService {
private List names;
//Creates a new instance of NameService
private NameService(List list_of_names){
this.names=list_of_names;
}
public static NameService getInstance(List list_of_names){
return new NameService(list_of_names);
}
public List findNames(String prefix){
String prefix_upper=prefix.toUpperCase();
List matches=new ArrayList();
Iterator iter=names.iterator();
while(iter.hasNext()){
String name=(String)iter.next();
String name_upper_case=name.toUpperCase();
if(name_upper_case.startsWith(prefix_upper)){
boolean result=matches.add(name);
}
}
return matches;
}
}
