《ajax基础教程》里一个自动补全的例子

yinbinhome · 发表于 2013-2-8 00:43:03

这是一个类似于google自动补全的例子，挺长的，很容易打错，我调试了大半天才调出来，希望大家能用上。这个功能在表示层与用户交互的时候很有用，很人性化，很好的诠释了AJAX的异步的特点。
jsp部分如下：
<div style="padding-right: 5.4pt; padding-left: 5.4pt; background: #e6e6e6; padding-bottom: 4px; width: 95%; padding-top: 4px;">

<%...@pagelanguage="java"import="java.util.*"pageEncoding="gb2312"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

<html>

<head>

<title>AjaxAutoComplete!</title>

<styletype="text/css">...

.mouseOut{...}{

background:#708090;

color:#FFFAFA;

}

.mouseOver{...}{

background:#FFFAFA;

color:#000000;

}

</style>

<scripttype="text/javascript">...

varxmlHttp;

varcompleteDiv;

varinputField;

varnameTable;

varnameTableBody;

functioncreateXMLHttpRequest()...{

if(window.ActiveXObject)...{

xmlHttp=newActiveXObject("Microsoft.XMLHTTP");

}elseif(window.XMLHttpRequest)...{

xmlHttp=newXMLHttpRequest();

}

functioninitVars()...{

inputField=document.getElementById("names");

nameTable=document.getElementById("name_table");

completeDiv=document.getElementById("popup");

nameTableBody=document.getElementById("name_table_body");

}

functionfindNames()...{

initVars();

if(inputField.value.length>0)...{

createXMLHttpRequest();

varurl="/ajaxWeb/AutoCompleteServlet.do?names="+escape(inputField.value);

xmlHttp.open("GET",url,true);

xmlHttp.onreadystatechange=callback;

xmlHttp.send(null);

}else...{

clearNames();

}

functioncallback()...{

if(xmlHttp.readyState==4)...{

if(xmlHttp.status==200)...{

varname=xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;

//alert(name);

setNames(xmlHttp.responseXML.getElementsByTagName("name"));

}elseif(xmlHttp.status==204)...{

clearNames();

}

functionsetNames(the_names)...{

//alert("1.the_names="+the_names.length);

//alert("=1=");

clearNames();

//alert("=2=");

varsize=the_names.length;

//alert("2.the_names="+size);

//setOffsets()设置下拉框的属性

setOffsets();

varrow,cell,txtNode,tbody;

for(vari=0;i<size;i++)...{

varnextNode=the_names.firstChild.data;

//tbody=document.createElement("tbody");
row=document.createElement("tr");
cell=document.createElement("td");
txtNode=document.createTextNode(nextNode);
//cell的属性设置

//===================================
cell.onmouseout=function()...{this.className='mouseOver';}
cell.onmouseover=function()...{this.className='mouseOut';}
cell.setAttribute("bgcolor","green");
cell.setAttribute("border","0");
cell.onclick=function()...{populateName(this);}
//===================================
//alert("=3=");
nameTableBody.appendChild(row);
row.appendChild(cell);
cell.appendChild(txtNode);
//alert("=4=");
//===================================
}
}
functionsetOffsets()...{
varend=inputField.offsetWidth;
varleft=calculateOffsetLeft(inputField);
vartop=calculateOffsetTop(inputField)+inputField.offsetHeight;

completeDiv.style.border="black1pxsolid"
completeDiv.style.left=left+"px";
completeDiv.style.top=top+"px";
nameTable.style.width=end+"px";
}

functioncalculateOffsetLeft(field)...{
returncalculateOffset(field,"offsetLeft");
}
functioncalculateOffsetTop(field)...{
returncalculateOffset(field,"offsetTop");
}
functioncalculateOffset(field,attr)...{
varoffset=0;
while(field)...{
offset+=field[attr];
field=field.offsetParent;
}
returnoffset;
}
functionpopulateName(cell)...{
inputField.value=cell.firstChild.nodeValue;
clearNames();
}
functionclearNames()...{
varind=nameTableBody.childNodes.length;
//alert("1.下拉菜单个数="+ind);
for(vari=ind-1;i>=0;i--)...{
nameTableBody.removeChild(nameTableBody.childNodes);
}
ind=nameTableBody.childNodes.length;
//alert("2.下拉菜单个数="+ind);
completeDiv.style.border="none";
}

</script>
</head>
<body>
<h1>AjaxAutoCompleteExample!</h1>
Names:<inputtype="text"id="names"size="20"onkeyup="findNames();"style="height:20;"/>
<divstyle="position:absolute;"id="popup">
<tableid="name_table"bgcolor="#FFFAFA"border="0"cellspacing="0"cellpadding="0">
<span styl

		自动登录	找回密码
密码			立即注册