《ajax基础教程》里一个自动补全的例子-优快云博客

本文介绍了一个使用AJAX实现的自动补全功能示例，通过JavaScript与Servlet交互，展示了如何根据用户输入动态更新下拉建议列表。

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

这是一个类似于google自动补全的例子，挺长的，很容易打错，我调试了大半天才调出来，希望大家能用上。这个功能在表示层与用户交互的时候很有用，很人性化，很好的诠释了AJAX的异步的特点。

jsp部分如下：

<%...@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[i].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[i]);

}

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">