AJAX Search Not Showing Results

Question

I'm trying my hand at creating an AJAX search and having some difficulty. Here's my JS and form:

<script type="text/javascript">// 
function prodSearch(request) {

    if (request == "") {
        document.getElementById("searchResults").innerHtml="";  
        return;
    }

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }

    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readystate==4 && xmlhttp.status==200) {
            document.getElementById("searchResults").innerHTML=xmlhttp.responseText;
        }
    }
xmlhttp.open("GET","/ps.php?country="+request,true);
xmlhttp.send();
}
</script>
<form>
<select name="countries" onchange="prodSearch(this.value)">
<option>Select a country:</option> ...
<div id="searchResults">
</div>

And here's my php:

<?php
/* Get data from form */
$country = $_GET["country"];

/* Build query */
$result = "SELECT .... ";

while( $row = $modx->db->getRow( $result ) ) {
    echo "<pre>";
    print_r($row);
    echo "</pre>";
}

?>

My query to the database works perfectly, and I can see in Firebug console that ps.php is returning results. However, I just can't seem to get it to actually populate the searchResults div with the results. What am I doing wrong?

Answer 1

readyState has a capital S. Change your if condition for:

if(xmlhttp.readyState==4 && xmlhttp.status==200) {