首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

自动补全表单字段,无效!请问前辈

2012-04-27 
自动补全表单字段,无效!请教前辈!这是我从教程源代码复制过来的,运行无效,请各位花点时间帮我看看哪里出问

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

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


代码如下:

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("searchField").value = thisDiv.innerHTML;    document.getElementById("popups").innerHTML = "";} 



script06.css

CSS code
body, #searchfield {    font: 1.2em arial, helvetica, sans-serif;}.suggestions {    background-color: #FFF;    padding: 2px 6px;    border: 1px solid #000;}.suggestions:hover {    background-color: #69F;}#popups {    position: absolute;}#searchField.error {    background-color: #FFC;}


us-states.xml

XML code
  <?xml version="1.0" ?> - <choices xml:lang="EN">- <item>  <label>Alabama</label>   <value>AL</value>   </item>- <item>  <label>Alaska</label>   <value>AK</value>   </item>- <item>  <label>Arizona</label>   <value>AZ</value>   </item>- <item>  <label>Arkansas</label>   <value>AR</value>   </item>- <item>  <label>California</label>   <value>CA</value>   </item>- <item>  <label>Colorado</label>   <value>CO</value>   </item>- <item>  <label>Connecticut</label>   <value>CT</value>   </item>- <item>  <label>Delaware</label>   <value>DE</value>   </item>- <item>  <label>Florida</label>   <value>FL</value>   </item>- <item>  <label>Georgia</label>   <value>GA</value>   </item>- <item>  <label>Hawaii</label>   <value>HI</value>   </item>- <item>  <label>Idaho</label>   <value>ID</value>   </item>- <item>  <label>Illinois</label>   <value>IL</value>   </item>- <item>  <label>Indiana</label>   <value>IN</value>   </item>- <item>  <label>Iowa</label>   <value>IA</value>   </item>- <item>  <label>Kansas</label>   <value>KS</value>   </item>- <item>  <label>Kentucky</label>   <value>KY</value>   </item>- <item>  <label>Louisiana</label>   <value>LA</value>   </item>- <item>  <label>Maine</label>   <value>ME</value>   </item>- <item>  <label>Maryland</label>   <value>MD</value>   </item>- <item>  <label>Massachusetts</label>   <value>MA</value>   </item>- <item>  <label>Michigan</label>   <value>MI</value>   </item>- <item>  <label>Minnesota</label>   <value>MN</value>   </item>- <item>  <label>Mississippi</label>   <value>MS</value>   </item>- <item>  <label>Missouri</label>   <value>MO</value>   </item>- <item>  <label>Montana</label>   <value>MT</value>   </item>- <item>  <label>Nebraska</label>   <value>NE</value>   </item>- <item>  <label>Nevada</label>   <value>NV</value>   </item>- <item>  <label>New Hampshire</label>   <value>NH</value>   </item>- <item>  <label>New Jersey</label>   <value>NJ</value>   </item>- <item>  <label>New Mexico</label>   <value>NM</value>   </item>- <item>  <label>New York</label>   <value>NY</value>   </item>- <item>  <label>North Carolina</label>   <value>NC</value>   </item>- <item>  <label>North Dakota</label>   <value>ND</value>   </item>- <item>  <label>Ohio</label>   <value>OH</value>   </item>- <item>  <label>Oklahoma</label>   <value>OK</value>   </item>- <item>  <label>Oregon</label>   <value>OR</value>   </item>- <item>  <label>Pennsylvania</label>   <value>PA</value>   </item>- <item>  <label>Rhode Island</label>   <value>RI</value>   </item>- <item>  <label>South Carolina</label>   <value>SC</value>   </item>- <item>  <label>South Dakota</label>   <value>SD</value>   </item>- <item>  <label>Tennessee</label>   <value>TN</value>   </item>- <item>  <label>Texas</label>   <value>TX</value>   </item>- <item>  <label>Utah</label>   <value>UT</value>   </item>- <item>  <label>Vermont</label>   <value>VT</value>   </item>- <item>  <label>Virginia</label>   <value>VA</value>   </item>- <item>  <label>Washington</label>   <value>WA</value>   </item>- <item>  <label>West Virginia</label>   <value>WV</value>   </item>- <item>  <label>Wisconsin</label>   <value>WI</value>   </item>- <item>  <label>Wyoming</label>   <value>WY</value>   </item>  </choices> 



[解决办法]
听说解决了,答案呢?想看看

热点排行