<div id="result">&nbsp;</div>

<form action="search.php" method="post">
<label for="query"><strong>Search:</strong>&nbsp;<input type="text" name="search" autocomplete="off" id="query" onKeyUp="preSearch()" /></label>&nbsp;<input type="submit" name="done" value="Search Now">

</form>

//XMLhttp variable will hold the XMLHttpRequest object
var xmlhttp = false;
        
// If the user is using Mozilla/Firefox/Safari/etc
if (window.XMLHttpRequ  est) {
        //Intiate the object
        xmlhttp = new XMLHttpRequest();
        //Set the mime type
        xmlhttp.overrideMim  eType('text/xml');
}
// If the user is using IE
else if (window.ActiveXObje  ct) {
        //Intiate the object
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

function preSearch() {
        //Put the form data into a variable
	var theQuery = document.getElement  ById('query').value  ;
	
        //If the form data is *not* blank, query the DB and return the results
	if(theQuery !== "") {
                //Change the content of the "result" DIV to "Searching..."

                //This gives our user confidence that the script is working if it takes a moment for the result to be returned. However the user will likely never see this as the result will be returned in an instant...
		document.getElement  ById('fillin').inne  rHTML = "Searching...";
		
                //This sets a variable with the URL (and query strings) to our PHP script
		var url = 'AJAX.php?q=' + theQuery;
                //Open the URL above "asynchronously" (that's what the "true" is for) using the GET method
		xmlhttp.open('GET',   url, true);
                //Check that the PHP script has finished sending us the result
		xmlhttp.onreadystat  echange = function() {
			if(xmlhttp.readySta  te == 4 && xmlhttp.status == 200) {
                                //Replace the content of the "result" DIV with the result returned by the PHP script
				document.getElement  ById('result').inne  rHTML = xmlhttp.responseTex  t + ' ';
			} else {
                                //If the PHP script fails to send a response, or sends back an error, display a simple user-friendly notification
				document.getElement  ById('result').inne  rHTML = 'Error: preSearch Failed!';
			}
		};
		xmlhttp.send(null);  
	}
}