I am currently working on implementing an autosuggestion search field that functions similarly to Google Suggestion. I am utilizing pure JavaScript/AJAX along with two files: index.php and ajax-submit.php (which is responsible for querying the database). However, at the moment, I am only echoing a text for debugging purposes.
There are a couple of issues that I have encountered:
Problem 1: Initially, the firebug outputs an error stating that xmlhttp is not defined as soon as I start typing in the search input [resolved, see below].
Problem 2: I also want to echo the content of the search input like this:
echo $_GET['search_text'];
or
if(isset($_GET['search_text'])) {
echo $search_text = $_GET['search_text'];
}
However, I am encountering the following error: *Undefined index: search_text in ajax-submit.php*
Below is my suggest function call:
<form action="" name="search" id="search">
<input type="text" name="search_text" id="search_text" onkeydown="suggest();" />
</form>
<div id="results" style="background:yellow"></div>
And here is my suggest() function:
<script type="text/javascript">
//function does not needs params because is unique to the input search_text
function suggest() {
//browser object check
if(window.xmlHttpRequest) {
xmlhttp = new xmlHttpRequest();
}
else if (window.ActiveXObject) {
//console.log("error");
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
//when the onreadystatechange event occurs
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementByID('results').innerHTML = xmlhttp.responseText;
}
}//end onready
xmlhttp.open('GET', 'ajax-submit.php', true);
xmlhttp.send();
}//end suggest
</script>
Additionally, here is the code in my php ajax-submit file:
<?php
echo 'Something';
?>
If anyone could assist me with debugging, it would be greatly appreciated. It seems like it might be a scope issue, but I am uncertain.
Furthermore, how do you typically debug an Ajax request in Firebug?
Thank you