像百度、Google等搜索引擎在搜索框中输入一些内容后，在搜索框下方会出现一个包含很多匹配信息的提示框。这些推荐关键字极大的方便了我们的搜索，因为我们有时候使用的关键字并非很合适，Ajax在这里的应用增强了用户体验。相当于弱化的Google Instant（谷歌实时）。

 
 

  
  
@H_403_20@<body@H_403_20@>
  
  
@H_403_20@<formaction="#"@H_403_20@>
  
  
Pleaseenteryourstate:@H_403_20@<br@H_403_20@/>
  
  
@H_403_20@<inputtype="text"id="searchField"autocomplete="off"@H_403_20@>
  
  
@H_403_20@<divid="popups"@H_403_20@>@H_403_20@</div@H_403_20@>
  
  
@H_403_20@</form@H_403_20@>
  
  
@H_403_20@</body@H_403_20@>
 
 

 
 

  
  
/*为搜索字段和弹出菜单设置样式*/
  
  
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(){
  
  
//每次击键的事件处理程序为searchSuggest；
  
  
document.getElementById("searchField").onkeyup=searchSuggest;
  
  
if(window.XMLHttpRequest){
  
  
xhr=newXMLHttpRequest();
  
  
}elseif(window.ActiveXObject){
  
  
xhr=newActiveXObject("Microsoft.XMLHTTP");
  
  
}
  
  

  
  
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){
  
  
//读取每个item节点，寻找其中的label节点，并且存储其firstChild（州名）在数组statesArray中
  
  
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").style.display="block";
  
  
document.getElementById("popups").innerHTML="";
  
  

  
  
//遍历州名数组，并且将当前查看的州名存储在thisState
  
  
for(vari=0;i<statesArray.length;i++){
  
  
varthisState=statesArray[i].nodeValue;
  
  

  
  
if(thisState.toLowerCase().indexOf(str.toLowerCase())==0){
  
  
//对匹配的州名，创建div，将它的innerHTML设置为州名，并添加onclick处理程序，修改className，
  
  
//然后将整个div追加到popupsdiv中。
  
  
vartempDiv=document.createElement("div");
  
  
tempDiv.innerHTML=thisState;
  
  
tempDiv.onclick=makeChoice;
  
  
tempDiv.className="suggestions";
  
  
document.getElementById("popups").appendChild(tempDiv);
  
  
}
  
  
}//endoffor
  
  
//foundCt为匹配的州的个数，若为0说明用户输入错误，改className；
  
  
//若为1则是找到了唯一的匹配，将这个州名放进表单。提示框设为空
  
  
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="";
  
  
}
  
  
}else{//若没有输入信息，或被用户消去则隐藏提示框
  
  
document.getElementById("popups").style.display="none";
  
  
}
  
  

  
  
}
  
  

  
  
//通过点击列表来选择州
  
  
functionmakeChoice(evt){
  
  
if(evt){
  
  
varthisDiv=evt.target;
  
  
}else{
  
  
varthisDiv=window.event.srcElement;
  
  
}
  
  
//将选中的列表项填入输入框，并去除列表
  
  
document.getElementById("searchField").value=thisDiv.innerHTML;
  
  
document.getElementById("popups").innerHTML="";
  
  
}