文件一览
- 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;
}
}
运行效果参照附件:
- 大小: 15.3 KB
分享到:
相关推荐
asp+ajax自动完成
Ajax文本框自动完成示例,采用ajax技术做的小例子,完成文本的自动输入功能。
利用ajax完美实现如google效果的自动完成,在此分享
AJAX实例:根据邮编自动完成地址信息 AJAX实例:根据邮编自动完成地址信息
帮助用户快速的进行搜索,这类功能成为自动完成功能,这个功能目前在很多软件中实现,而web程序程序只能通过浏览器自身实现. 看完本项目,你将学习到如何实现基于ajax的自动完成功能,项目使用的是vs2003 ....
看完本项目,你将学习到如何实现基于ajax的自动完成功能,本项目使用的是vs2003开发,直接解压到IIS目录下. 补充说明: 在上次项目的基础上进行的更新,把自动完成功能和textbox控件结合起来,成为一个自定义控件,...
c#ajax 自动完成控件实现自动搜索
jsp+Ajax表单自动完成,和Google的搜索的差不多
自己写的一个纯JavaScript和Servlet做的一个模仿Google搜索自己完成的源代码,JSP写的,无需加载数据库。
输入框 自动完成 AJAX,可以与JAVA 或者 NET 后台代码交互,一款比较好的 自动完成功能
AJAX自动完成功能 ,没用控件,没用LAjaxer封装类
本项目是利用DWR框架实现Ajax无刷新,自动补全功能!
仿google搜索ajax自动完成功能 仿照google搜索时输入关键字后 下面立马出现包含改关键字的所有记录条数 使用了ajax完成此功能.
JSP+Ajax+Servlet 自动完成类似谷歌百度搜索带数据库SQL Server分数可能有点高,但是非常好的
自动完成控件ajax修改版源码 根据ajax自动完成代码修改的,实现了输入字符串显示相关的数据信息
表单text用Ajax实现自动完成功能。GoogleSuggest。
搜索或者进行用户登录时,有的用户名比较复杂导致输入比较慢。为了加快登录速度,需要在下拉列表中给出用户名,让用户自动选择。(经严格测试,放心使用)
ajax实现自动完成功能带源码,仿Google Suggest那种,输入一个字母,出现几个备选项
基于AJax的自动完成功能。。。asp.net
jquery 文本框 自动补全 ajax autocomplete 完整实例