Ajax 提供自动完成

xiangtui

浏览: 308581 次
性别:
来自: 成都

最近访客更多访客>>

DeilSky

ken_blok

mingletxt

liangzi_001

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

Ajax Servlet HTML JavaScript CSS

文件一览

autocomplete.html
AutoCompleteServlet.java
NameService.java

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 Auto Complete</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() {
	completeDiv = document.getElementById("popup");
	inputField = document.getElementById("names");
	nameTable = document.getElementById("name_table");
	nameTableBody = document.getElementById("name_table_body");
}
function findNames() {
	initVars();
	if (inputField.value.length>0) {
		createXMLHttpRequest();
		var url="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.onmouseout=function() {this.className='mouseOver';};
		cell.onmouseOver=function() {this.className='mouseOut'};
		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--) {
		nameTableBody.removeChild(nameTableBody.childNodes[i]);
	}
	completeDiv.style.border = "none";
}
</script>
</head>
<body>
<h1>Ajax Auto Complete Example</h1>
Name:<input type="text" size="20" id="names" onkeyup="findNames();" style="height:20;"/>
<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>

AutoCompleteServlet.java

package ajaxbook.chap4;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

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

public class AutoCompleteServlet extends HttpServlet {

	private List names = new ArrayList();
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String prefix = req.getParameter("names");
		NameService service = NameService.getInstance(names);
		List matching = service.findNames(prefix);
		if (matching.size()>0) {
			PrintWriter out = resp.getWriter();
			resp.setContentType("text/xml");
			resp.setHeader("Cache-Control", "no-cache");
			out.println("<response>");
			Iterator it = matching.iterator();
			while(it.hasNext()) {
				String name = (String)it.next();
				out.println("<name>"+name+"</name>");
			}
			out.println("</response>");
			matching = null;
			service = null;
			out.close();
		} else {
			resp.setStatus(HttpServletResponse.SC_NO_CONTENT);
		}
	}

	@Override
	public void init(ServletConfig config) throws ServletException {
		names.add("Abe");
		names.add("Abel");
		names.add("Abigail");
		names.add("Abner");
		names.add("Abraham");
		names.add("Marcus");
		names.add("Marcy");
		names.add("Marge");
		names.add("Marie");
		
	}

}

NameService.java

package ajaxbook.chap4;

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

public class NameService {

	private List names;

	public NameService(List names) {
		this.names = names;
	}
	
	public static NameService getInstance(List names) {
		return new NameService(names);
	}
	
	public List findNames(String prefix) {
		String prefix_upper = prefix.toUpperCase();
		List matches = new ArrayList();
		Iterator it = names.iterator();
		while(it.hasNext()) {
			String name = (String)it.next();
			String name_upper_case = name.toUpperCase();
			if (name_upper_case.startsWith(prefix_upper)) {
				boolean result = matches.add(name);
			}
		}
		return matches;
	}
}

运行效果参照附件：