ajax来自动补全表单字段示例
源代码：
脚本一：
<!DOCTYPEhtml> <html> <head> <title>Auto-fillFormFields</title> <linkrel="stylesheet"href="script06.css"rel="externalnofollow"> <scriptsrc="script06.js"></script> </head> <body> <formaction="#"> Pleaseenteryourstate:<br> <inputtype="text"id="searchField"autocomplete="off"><br> <divid="popups"></div> </form> </body> </html>
脚本二：
body,#searchfield{
font:1.2emarial,helvetica,sans-serif;
}
.suggestions{
background-color:#FFF;
padding:2px6px;
border:1pxsolid#000;
}
.suggestions:hover{
background-color:#69F;
}
#popups{
position:absolute;
}
#searchField.error{
background-color:#FFC;
}
脚本三：
window.onload=initAll;
varxhr=false;
varstatesArray=newArray();
functioninitAll(){
document.getElementById("searchField").onkeyup=searchSuggest;
if(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}
else{
if(window.ActiveXObject){
try{
xhr=newActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}
if(xhr){
xhr.onreadystatechange=setStatesArray;
xhr.open("GET","us-states.xml",true);
xhr.send(null);
}
else{
alert("Sorry,butIcouldn'tcreateanXMLHttpRequest");
}
}
functionsetStatesArray(){
if(xhr.readyState==4){
if(xhr.status==200){
if(xhr.responseXML){
varallStates=xhr.responseXML.getElementsByTagName("item");
for(vari=0;i<allStates.length;i++){
statesArray[i]=allStates[i].getElementsByTagName("label")[0].firstChild;
}
}
}
else{
alert("Therewasaproblemwiththerequest"+xhr.status);
}
}
}
functionsearchSuggest(){
varstr=document.getElementById("searchField").value;
document.getElementById("searchField").className="";
if(str!=""){
document.getElementById("popups").innerHTML="";
for(vari=0;i<statesArray.length;i++){
varthisState=statesArray[i].nodeValue;
if(thisState.toLowerCase().indexOf(str.toLowerCase())==0){
vartempDiv=document.createElement("div");
tempDiv.innerHTML=thisState;
tempDiv.onclick=makeChoice;
tempDiv.className="suggestions";
document.getElementById("popups").appendChild(tempDiv);
}
}
varfoundCt=document.getElementById("popups").childNodes.length;
if(foundCt==0){
document.getElementById("searchField").className="error";
}
if(foundCt==1){
document.getElementById("searchField").value=document.getElementById("popups").
firstChild.innerHTML;
document.getElementById("popups").innerHTML="";
}
}
}
functionmakeChoice(evt){
if(evt){
varthisDiv=evt.target;
}
else{
varthisDiv=window.event.srcElement;
}
document.getElementById("searchField").value=thisDiv.innerHTML;
document.getElementById("popups").innerHTML="";
}
分析如下：
1.Pleaseenteryourstate:<br>
<inputtype="text"id="searchField"autocomplete="off"><br>
<divid="popups"></div>
这是我们要注意的HTML代码。其中的特殊之处是autocomplete属性（这个属性是非标准兼容的）。
它告诉浏览器不要在这个字段上执行任何自动补全，因为我们将用脚本处理自动补全。与XMLHttp-
Request一样，尽管autocomplete不是任何W3C建议的一部分，但是它得到了很好的跨浏览器支持。
2.document.getElementById("searchField").onkeyup=searchSuggest;
为了捕捉和处理每次击键，需要一个事件处理程序，这是在initAll()中设置的。
3.xhr.onreadystatechange=setStatesArray;
xhr.open("GET","us-states.xml",true);
xhr.send(null);
4.
if(xhr.responseXML){
varallStates=xhr.responseXML.getElementsByTagName("item");
for(vari=0;i<allStates.length;i++){
statesArray[i]=allStates[i].getElementsByTagName("label")[0].firstChild;
}
}
我们在这里读取文件，查看每个item节点，寻找其中的label节点，并且存储label的firstChild
（州名本身）。每个州名存储在statesArray数组中的一个元素中。
5.varstr=document.getElementById("searchField").value;
document.getElementById("searchField").className="";
当开始在字段中进行输入时，就会执行searchSuggest()事件处理程序中的代码。首先获得
searchField的值，也就是到目前为止已经输入的信息。接下来，清空这个字段的class属性。
6.if(str!=""){
document.getElementById("popups").innerHTML="";
如果还没有输入任何信息，就不做任何事，所以在这里进行检查，确保用户已经输入了某个值，
然后再弹出可能值的列表。如果已经输入了某些信息，就清空以前的可能值列表。
7.for(vari=0;i<statesArray.length;i++){
varthisState=statesArray[i].nodeValue;
现在，遍历州名的列表，并且将当前查看的州名存储在thisState中。
8.if(thisState.toLowerCase().indexOf(str.toLowerCase())==0){
我们希望检查用户到目前为止输入的内容是否某个州名的一部分——但是仅仅这样还不够，我们
还必须确保输入的内容位于州名的开头。毕竟，如果输入了Kansas，你并不希望下拉框中显示Arkansas
或Kansas。另外，在进行这项检查时，还在检查indexOf()之前确保两个字符串都是小写的。
如果indexOf()返回0（也就是说，在thisState的开头位置处找到了输入的字符串），那么我们
就知道找到了一个匹配。
9.
vartempDiv=document.createElement("div");
tempDiv.innerHTML=thisState;
tempDiv.onclick=makeChoice;
tempDiv.className="suggestions";
document.getElementById("popups").appendChild(tempDiv);
因为这个州名是一个可能值，我们希望将它添加到要显示的列表中。实现方法是，创建一个临时
的div，将它的innerHTML设置为这个州名，添加onclick处理程序和className，然后将整个div追
加到popupsdiv中。将每个州名作为单独的div添加，这样我们就能够使用JavaScript和CSS操作每
个州名。
10.varfoundCt=document.getElementById("popups").childNodes.length;
当遍历完所有州名之后，我们要建立弹出窗口——但是我们得到了多少个州名呢？这里就计算这
个值：foundCt。
11.if(foundCt==0){
document.getElementById("searchField").className="error";
}
如果foundCt是0，就说明用户输入了错误的内容。我们将className设置为error，从而让用户
知道输入错了，这一设置会使输入字段显示浅黄色背景（这由脚本13-17中的CSS样式规则控制）。
12.
if(foundCt==1){
document.getElementById("searchField").value=document.getElementById
➝("popups").firstChild.innerHTML;
document.getElementById("popups").innerHTML="";
}
如果foundCt是1，我们就知道找到了唯一的匹配，所以可以将这个州名放进字段。如果用户已
经输入了ca，他们就不需要再输入lifornia，因为我们已经知道了他们要输入哪个州名。我们使用
popups中唯一的div填写输入字段，从而自动地提供完整的州名，然后清空popupsdiv。
13.
functionmakeChoice(evt){
if(evt){
varthisDiv=evt.target;
}
else{
varthisDiv=window.event.srcElement;
}
document.getElementById("searchField").value=thisDiv.innerHTML;
document.getElementById("popups").innerHTML="";
}
输入州名的另一种方法是，单击弹出列表中的一个州名。在这种情况下，会调用makeChoice()事
件处理程序。首先，我们通过检查事件的目标，查明用户单击了哪个州名，这会提供一个特定的div。
查看这个div的innerHTML会提供州名，我们将这个州名放进输入字段。最后，清空可能值的弹出
列表。