I have a basic HTML form that I want to fill in with the names of the US states. I have all of 50 of them (Alabama to Wyoming) stored in the following format:
<?xml version="1.0"?>
<states xml:lang="EN">
<item>
<label>Alabama</label>
<value>AL</value>
</item>
<item>
<label>Alaska</label>
<value>AK</value>
</item>
...
I wrote some AJAX for this:
function ajaxFunction(str) {
if (str.length==0) {
document.getElementById("search").innerHTML="";
document.getElementById("search").style.border="0px";
return;
}
var ajaxRequest = new XMLHttpRequest();
ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.readyState==4 && ajaxRequest.status==200) {
document.getElementById("search").innerHTML=ajaxRequest.responseText;
document.getElementById("search").style.border="1px solid #A5ACB2";
}
}
ajaxRequest.open("GET","USA_States.xml",true);
ajaxRequest.send();
}
HTML:
<form id = "form1">
<input onkeyup="ajaxFunction(this.value);" type = "text" size = "30" id = "text1" autocomplete="off"/>
<div id = "search">
And it still does not work. Suggestions? What am I doing wrong?