Ajax应用――自动补全表单字段（Google Instant）

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

下面的一个例子中，在表单的输入框进行输入时，会显示与输入的字母匹配的美国州名列表。随着用户输入更多的字母，这个列表会逐渐缩短，直到只留下一个州名。然后，这个州名就会自动放进输入字段中，列表消失。

HTML & CSS

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

注释：autocomplete属性，是HTML 5新属性语法:<input autocomplete="value"> 属性值：on 默认，规定启用自动完成功能；off，规定禁用自动完成。该属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的项。autocomplete属性适用于<form>，以及下面的<input>类型CSS <style type="text/css">

 
 
  
  /*为搜索字段和弹出菜单设置样式*/
  
  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;
  
  }

Javascript代码

 
 
  
  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="";
  
  }

注释：searchSuggest函数中的“if(thisState.toLowerCase().indexOf(str.toLowerCase()) == 0)”，我们要检查用户到目前位置输入的内容是否为某个州名的一部分，但是，仅仅这样还不行，还必须确保输入的内容位于州名的开头。比如你输入了，Kansas，你并不希望下拉框中显示Arkansas或Kansas。如果indexof（）返回0，则说明在thisState的开头位置找到了输入的字符串。

效果：

原文链接：https://www.f2er.com/ajax/166687.html

Ajax应用――自动补全表单字段（Google Instant）

猜你在找的Ajax相关文章