var tempDiv = document.createElement("div"); tempDiv.innerHTML = thisState; tempDiv.onclick = makeChoice; tempDiv.className = "suggestions"; document.getElementById("popups").appendChild(tempDiv);
因为这个州名是一个可能值，我们希望将它添加到要显示的列表中。实现方法是，创建一个临时
的div，将它的innerHTML设置为这个州名，添加onclick处理程序和className，然后将整个div追
加到popups div中。将每个州名作为单独的div添加，这样我们就能够使用JavaScript和CSS操作每
个州名。
10. var foundCt = document.getElementById("popups").childNodes.length;
当遍历完所有州名之后，我们要建立弹出窗口——但是我们得到了多少个州名呢？这里就计算这
个值：foundCt。
11. if (foundCt == 0) {
document.getElementById("searchField").className = "error";
}
如果foundCt是0，就说明用户输入了错误的内容。我们将className设置为error，从而让用户
知道输入错了，这一设置会使输入字段显示浅黄色背景（这由脚本13-17中的CSS样式规则控制）。
12.
if (foundCt == 1) { document.getElementById("searchField").value = document.getElementById ➝("popups").firstChild.innerHTML; document.getElementById("popups").innerHTML = ""; }
如果foundCt是1，我们就知道找到了唯一的匹配，所以可以将这个州名放进字段。如果用户已
经输入了ca，他们就不需要再输入lifornia，因为我们已经知道了他们要输入哪个州名。我们使用
popups中唯一的div填写输入字段，从而自动地提供完整的州名，然后清空popups div。
13.
function makeChoice(evt) { if (evt) { var thisDiv = evt.target; } else { var thisDiv = window.event.srcElement; } document.getElementById("searchField").value = thisDiv.innerHTML; document.getElementById("popups").innerHTML = ""; }
输入州名的另一种方法是，单击弹出列表中的一个州名。在这种情况下，会调用makeChoice()事
件处理程序。首先，我们通过检查事件的目标，查明用户单击了哪个州名，这会提供一个特定的div。
查看这个div的innerHTML会提供州名，我们将这个州名放进输入字段。最后，清空可能值的弹出
列表。
您可能感兴趣的文章: