ajax自动填充表单字段示例
源代码：脚本1：
自动填充表单字段
请输入您的状态：
脚本两：
体，# searchField {
字体：1.2em Arial，Helvetica，sans-serif；
}
{。建议
背景颜色：# FFF；
填料：2px 6px；
边境：1px solid # 000；
}
{建议：悬停
背景颜色：# 69f；
}
{ #弹窗
位置：绝对；
}
{ # searchfield.error
背景颜色：# FFC；
}
脚本三：
在window.onload = initall；
VaR XHR =假；
无功statesarray =新的数组（）；
功能initall（）{
document.getelementbyid（搜索领域）。Onkeyup = searchsuggest；
如果（窗口。XMLHttpRequest）{
新的XMLHttpRequest（XHR）=；
}
{其他
如果（窗口。ActiveX对象）{
{试
XHR =新的ActiveX对象（微软。XMLHTTP ）；
}
catch（e）{ }
}
}
如果（XHR）{
xhr.onreadystatechange = setstatesarray；
Xhr.open（
Xhr.send（空）；
}
{其他
警报（对不起，但我不能创建一个XMLHttpRequest ）；
}
}
功能setstatesarray（）{
如果（xhr.readystate = = 4）{
如果（xhr.status = = 200）{
如果（XHR。responseXML之外）{
任何国家都xhr.responsexml.getelementsbytagname var =（项目）；
对于（var i = 0；i < allstates.length；i++）{
我statesarray { } =所有州均{我}。getElementsByTagName（标签）{ 0 }。第一个孩子；
}
}
}
{其他
警报（有一个问题，要求+ XHR。状态）；
}
}
}
功能searchsuggest（）{
var str = document.getelementbyid（搜索领域）的价值；
document.getelementbyid（搜索领域）。类名= ；
如果（STR）！）{
document.getelementbyid（弹出）.innerHTML = ；
对于（var i = 0；i < statesarray.length；i++）{
VaR这种状态= statesarray {我}节点；
如果（这种状态。toLowerCase）（str.tolowercase）（（。指数= = 0））{
无功tempdiv = document.createelement（div）；
这种tempdiv.innerhtml =；
tempdiv.onclick =选择；
tempdiv.classname =建议；
document.getelementbyid（弹出）。AppendChild（tempdiv）；
}
}
无功foundct = document.getelementbyid（弹出）。ChildNodes.length；
如果（foundct = = 0）{
document.getelementbyid（搜索领域）。类名=错误；
}
如果（foundct = = 1）{
document.getelementbyid（搜索领域）。值= document.getelementbyid（弹出）。
firstchild.innerhtml；
document.getelementbyid（弹出）.innerHTML = ；
}
}
}
功能选择（EVT）{
如果（EVT）{
无功thisdiv = evt.target；
}
{其他
无功thisdiv = window.event.srcelement；
}
document.getelementbyid（搜索领域的价值= thisdiv.innerhtml）；
document.getelementbyid（弹出）.innerHTML = ；
}
分析如下：
1。请输入您的状态：
这是HTML代码，我们必须注意，特色是autocomplete属性（这个属性是非标准兼容）。
It tells the browser do not perform any automatic completion in this field, because we will deal with the automatic completion ｓｃｒｉｐｔ.And XMLHttp-
与要求，虽然完成的不是任何W3C建议的一部分，它具有良好的跨浏览器支持。
2。document.getelementbyid（搜索领域）。Onkeyup = searchsuggest；
为了捕获和处理每一个按键，一个事件处理程序是必需的，这是在initall（）。
三.xhr.onreadystatechange = setstatesarray；
Xhr.open（
Xhr.send（空）；
四
如果（XHR。responseXML之外）{
任何国家都xhr.responsexml.getelementsbytagname var =（项目）；
对于（var i = 0；i < allstates.length；i++）{
我statesarray { } =所有州均{我}。getElementsByTagName（标签）{ 0 }。第一个孩子；
}
}
我们读到的文件在这里，看看每个项目节点，寻找它的标签节点和存储标签的第一个孩子
（状态）。每个国家的商店在statesarray数组的一个元素。
5。var str = document.getelementbyid（搜索领域）的价值；
document.getelementbyid（搜索领域）。类名= ；
当输入是该领域中开始，在searchsuggest代码（）事件处理程序的执行。首先得到
对搜索领域的价值，已经进入到目前为止的信息。其次，明确该领域的阶级属性。
6。如果（STR）！）{
document.getelementbyid（弹出）.innerHTML = ；
如果您没有输入任何信息，则不做任何事情，请检查此处以确保用户输入了某个值。
然后列出可能的值列表。如果输入了某些信息，那么前面的可能值列表就会清空。
7。对于（var i = 0；i < statesarray.length；i++）{
VaR这种状态= statesarray {我}节点；
现在，列表，遍历当前状态，视图状态存储在这个。
8。如果（这种状态。toLowerCase）（str.tolowercase）（（。指数= = 0））{
我们想检查用户输入到目前为止是否内容的一部分的状态，但这仅仅是不够的，我们
在输入的开始也必须确保内容位于状态。毕竟，如果你进入堪萨斯，你不想显示阿肯色在下拉框
或者堪萨斯。此外，在这个检查，确保两个字符串小写前检查指标（）。
如果IndexOf（）返回0（即，在这种状态下开始寻找输入的字符串），然后我们
我知道找到一根火柴。
九
无功tempdiv = document.createelement（div）；
这种tempdiv.innerhtml =；
tempdiv.onclick =选择；
tempdiv.classname =建议；
document.getelementbyid（弹出）。AppendChild（tempdiv）；
因为状态是一个可能的值，所以我们希望它会被添加到显示列表中，实现方法是创建一个临时的。
div的innerHTML将给国家，加入onclick处理程序和类名，然后DIV追逐
添加到弹出div每个国家作为一个单独的div添加，所以我们可以使用Javaｓｃｒｉｐｔ和CSS的每个操作
一个国家。
10。无功foundct = document.getelementbyid（弹出）。ChildNodes.length；
遍历所有状态后，我们必须建立一个弹出窗口——但是我们有很多名字下面是这个的计算
价值：foundct。
11。如果（foundct = = 0）{
document.getelementbyid（搜索领域）。类名=错误；
}
如果foundct是0，这表明用户输入错误的内容。我们设置类名错误让用户
知道输入是错误的，这个设置会导致输入字段显示一个淡黄色的背景（这是由脚本、CSS样式规则的控制）。
十二
如果（foundct = = 1）{
document.getelementbyid（搜索领域的价值= document.getelementbyid）。
（弹出）。FirstChild.innerHTML；
document.getelementbyid（弹出）.innerHTML = ；
}
如果foundct是1，我们将知道如何找到唯一的匹配，所以它可以投入该领域的状态。如果用户已经
进入Ca后，他们不需要输入lifornia，因为我们已经知道他们要进入的。我们用它
只有div填写弹出的领域，它会自动提供了一个完整的状态，然后清除弹出div
十三
功能选择（EVT）{
如果（EVT）{
无功thisdiv = evt.target；
}
{其他
无功thisdiv = window.event.srcelement；
}
document.getelementbyid（搜索领域的价值= thisdiv.innerhtml）；
document.getelementbyid（弹出）.innerHTML = ；
}
另一种方法是输入状态，一个状态点击弹出列表的选择。在这种情况下，（）被调用
零件加工程序。首先，我们通过检查事件的目标，找出什么对国家的用户点击，这将提供一个具体的部门
div的innerHTML将提供的状态，我们将输入的领域。最后，排空弹出的可能值
列表。