自动补全表单字段，无效！请问前辈-AJAX教程-爱易网页

自动补全表单字段，无效！请问前辈

日期：2014-05-16　浏览次数：20774 次

自动补全表单字段，无效！请教前辈！
这是我从教程源代码复制过来的，运行无效，请各位花点时间帮我看看哪里出问题了。

我的思路是，源代码复制过来的，应该原处没错误吧！？那么就是我的电脑的问题了。

代码如下：

script06.html

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>Auto-fill Form Fields</title>
    <link type="text/css" rel="stylesheet" href="script06.css" />
    <script type="text/javascript" src="script06.js"></script>
</head>
<body>
    <form action="#">
        Please enter your state:<br />
        <input type="text" id="searchField" autocomplete="off" /><br />
        <div id="popups"> </div>
    </form>
</body>
</html>

script06.js

JScript code

window.onload = initAll;
var xhr = false;
var statesArray = new Array();

function initAll() {
    document.getElementById("searchField").onkeyup = searchSuggest;

    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) { }
        }
    }

    if (xhr) {
        xhr.onreadystatechange = setStatesArray;
        xhr.open("GET", "us-states.xml", true);
        xhr.send(null);
    }
    else {
        alert("Sorry, but I couldn't create an XMLHttpRequest");
    }
}

function setStatesArray() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            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;
                }
            }
        }
        else {
            alert("There was a problem with the request " + xhr.status);
        }
    }
}

function searchSuggest() {
    var str = document.getElementById("searchField").value;
    document.getElementById("searchField").className = "";
    if (str != "") {
        document.getElementById("popups").innerHTML = "";
    
        for (var i=0; i<statesArray.length; i++) {
            var thisState = statesArray[i].nodeValue;
    
            if (thisState.toLowerCase().indexOf(str.toLowerCase()) == 0) {
                var tempDiv = document.createElement("div");
                tempDiv.innerHTML = thisState;
                tempDiv.onclick = makeChoice;
                tempDiv.className = "suggestions";
                document.getElementById("popups").appendChild(tempDiv);
            }
        }
        var foundCt = 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 = "";
        }
    }
}

function makeChoice(evt) {
    if (evt) {    
        var thisDiv = evt.target;
    }
    else {
        var thisDiv = window.event.srcElement;
    }
    document.getElementById(&

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

自动补全表单字段，无效！请问前辈

相关资料更多>

推荐阅读更多>