自动补全表单字段,无效!请教前辈!
这是我从教程源代码复制过来的,运行无效,请各位花点时间帮我看看哪里出问题了。
我的思路是,源代码复制过来的,应该原处没错误吧!?那么就是我的电脑的问题了。
代码如下:
script06.html
<!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>
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 = "";}
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;}
<?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>