title: AJAX Predictive Search
body: <p>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:</p>
  
  <pre><code>&lt;?xml version="1.0"?&gt;
  &lt;states xml:lang="EN"&gt;
  &lt;item&gt;
  &lt;label&gt;Alabama&lt;/label&gt;
  &lt;value&gt;AL&lt;/value&gt;
  &lt;/item&gt;
  &lt;item&gt;
  &lt;label&gt;Alaska&lt;/label&gt;
  &lt;value&gt;AK&lt;/value&gt;
  &lt;/item&gt;
  ...
  </code></pre>
  
  <p>I wrote some AJAX for this:</p>
  
  <pre><code>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 &amp;&amp; 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();
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form id = "form1"&gt;
    &lt;input onkeyup="ajaxFunction(this.value);" type = "text" size = "30" id = "text1" autocomplete="off"/&gt;
    &lt;div id = "search"&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>And it still does not work. Suggestions? What am I doing wrong?</p>