用于填写 HTML <form> 的基于 AJAX 的自动完成脚本答案

【问题标题】：AJAX-based auto-completion script for filling in an HTML <form>用于填写 HTML <form> 的基于 AJAX 的自动完成脚本
【发布时间】：2015-04-03 00:10:13
【问题描述】：

所以，我有这个 HTML 表单，我想用美国各州的名称来填写。我将所有 50 个（阿拉巴马州到怀俄明州）存储在以下格式：

<?xml version="1.0"?>
<states xml:lang="EN">
<item>
<label>Alabama</label>
<value>AL</value>
</item>
<item>
<label>Alaska</label>
<value>AK</value>
</item>
...

当用户开始输入“Ne”时，脚本将在弹出框中列出 Nebraska、Nevada、New Hampshire、New Jersey 等建议。当用户继续输入：“New”时，建议列表将缩小到新罕布什尔州、新泽西州、新墨西哥州、纽约州，直到只剩下一个州。我应该使用什么 AJAX 来让这个东西正常工作？

【问题讨论】：

嗨，欢迎来到 Stack Overflow。我们不是来为您编写代码的，但如果您遇到特定问题，我们可以提供帮助。在线查看一些示例，试一试，如果遇到困难，请返回特定问题。
看看这个，不用写两次github.com/kendagriff/jquery.states

标签： html ajax forms webforms

【解决方案1】：

function ajaxFunction(str) {
  if (str.length==0) { 
    document.getElementById("search").innerHTML="";
    document.getElementById("search").style.border="0px";
    return;
  }
  var input=document.getElementById('text1').value;
  var ajaxRequest = new XMLHttpRequest();
  ajaxRequest.onreadystatechange = function() {
    if (ajaxRequest.readyState==4 && ajaxRequest.status==200) {
        var res=ajaxRequest.responseXML;
        var states=res.getElementsByTagName("states");
        var elem=states[0];
        var items=res.getElementsByTagName("item");
        document.getElementById("search").innerHTML="";
    for(var i=0;i<items.length;i++){

        var item=items[i].getElementsByTagName("label");
        var state=item[0].innerHTML;
        var len=str.length;
        var match=state.substr(0,len);
        if(match.toUpperCase()==input.toUpperCase()){
            var val=items[i].getElementsByTagName("value");
            var value=val[0].innerHTML;
            var e = document.createElement('span');
            e.innerHTML = state+"("+value+")&nbsp;&nbsp;";
            document.getElementById("search").appendChild(e.firstChild);
        }
     }

      document.getElementById("search").style.border="1px solid #A5ACB2";
    }
  }
  ajaxRequest.open("GET","USA_States.xml",true);
  ajaxRequest.send();
}

【讨论】：