这是我们要注意的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) {
var allStates = xhr.responseXML.getElementsByTagName("item");
for (var i=0; i<allStates.length; i++) {
statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild;
}
}
我们在这里读取文件，查看每个item节点，寻找其中的label节点，并且存储label的firstChild
（州名本身）。每个州名存储在statesArray数组中的一个元素中。
5. var str = document.getElementById("searchField").value;
document.getElementById("searchField").className = "";
当开始在字段中进行输入时，就会执行searchSuggest()事件处理程序中的代码。首先获得
searchField的值，也就是到目前为止已经输入的信息。接下来，清空这个字段的class属性。
6. if (str != "") {
document.getElementById("popups").innerHTML = "";
如果还没有输入任何信息，就不做任何事，所以在这里进行检查，确保用户已经输入了某个值，
然后再弹出可能值的列表。如果已经输入了某些信息，就清空以前的可能值列表。
7. for (var i=0; i<statesArray.length; i++) {
var thisState = statesArray[i].nodeValue;
现在，遍历州名的列表，并且将当前查看的州名存储在thisState中。
8. if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {
我们希望检查用户到目前为止输入的内容是否某个州名的一部分——但是仅仅这样还不够，我们
还必须确保输入的内容位于州名的开头。毕竟，如果输入了Kansas，你并不希望下拉框中显示Arkansas
或Kansas。另外，在进行这项检查时，还在检查indexOf()之前确保两个字符串都是小写的。
如果indexOf()返回0（也就是说，在thisState的开头位置处找到了输入的字符串），那么我们
就知道找到了一个匹配。
9.
var tempDiv = document.createElement("div");
tempDiv.innerHTML = thisState;
tempDiv.onclick = makeChoice;
tempDiv.className = "suggestions";
document.getElementById("popups").appendChild(tempDiv);
因为这个州名是一个可能值，我们希望将它添加到要显示的列表中。实现方法是，创建一个临时
的div，将它的innerHTML设置为这个州名，添加onclick处理程序和className，然后将整个div追
