AJAX, MySQL, PHP autocomplete search field

[sparklechic007]

I have a search form where on user input matching details from the MySQL database are returned.  This all works fine.  However, I want to have an autocomplete field based on previous searches (search_history) table in the database.  I've looked at a few examples online but I can't get it to work.  I've debugged the code and there are no errors so I can't see why it isn't working, hopefully you can help me

 

There are 3 files: search.php contains the main form for user input; searchS.php queries the database for entries in the search_history table that match the user input for the autocomplete; the ajax_search.js is shown below

<script language='JavaScript' type="text/javascript">
//form validation method
function ValidateForm(){
	var q=document.searchForm.q
	//check that the search field is not blank
	if ((q.value==null)||(q.value=="")){
		alert("Search field can't be blank!")
		q.focus()
		return false
	}
	return true
	}

function GetXmlHttpObject(){
var xmlHttp=null;
try{
	//Firefox, Safari, Opera 8.0+
	xmlHttp=new XMLHttpRequest();
}
catch(e(
{
	//IE
	try{
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch(e){
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
}
return xmlHttp;
}

//get browser specific xmlhttprequest object
function getXmlHttpRequestObject(){
if(window.XMLHttpRequest){
	return new XMLHttpRequest();
	} 
	else if (window.ActiveXObject){
		return new ActiveXObject("Microsoft.XMLHTTP");
		} 
		else {
			alert("Upgrade Browser");
			}
}
//get the autocomplete
var searchR = getXmlHttpRequestObject();
//search method - keyup call
function searchS() {
var q = document.searchForm.q;
//start AJAX request
if (searchR.readyState == 4 || searchR.readyState == 0) && q.value.length > 2) {
var st = escape(document.getElementById('q').value);
searchR.open("GET", '"searchS.php"?q=' + st, true);
searchR.onreadystatechange = handleSearchS;
searchR.send(null);
}
}
//method to be called when AJAX response returned
function handleSearchS(){
if(searchR.readyState == 4){
	var ss = document.getElementById('search_s')
	ss.innerHTML = '';
	var st = searchR.responseText.split("\n");
	for(i=0; i < st.length - 1; i++){
		//build element string - IE does not support dynamically added attributes
		var s = '<div onmouseover = "javascript:suggestOver(this);" ';
		s += 'onmouseout="javascript:suggestOut(this);"';
		s += 'onclick="javascript:setS(this.innerHTML);"';
		s += 'class="suggest_link>' + st[i] + '</div>';
		ss.innerHTML += s;
	}
}
}
//mouseover
function suggestOver(div_value){
div_value.className = 'suggest_link_over';
}
//mouseout
function suggestOut(div_value){
div_value.className = 'suggest_link';
}
//click
function setS(value){
document.getElementById('q').value = value;
document.getElementById('search_s').innerHTML = '';
}
</script>

the css is in an external stylesheet but the code relating to the autocomplete is listed below:

search_s
{
position: absolute; 
background-color: #FFFFFF; 
text-align: left; 
border: 1px solid #000000;	
color: #000000;
display: block;
margin: 0 0 0 0.2em;
padding: 0 0 0 0;
z-index: 50000;	
}
.suggest_link {
margin: 0 0 0 0;
padding: 4px 3px 4px 3px;
min-width: 12em;
}
.suggest_link_over {
font-weight: bolder;
margin: 0 0 0 0;
padding: 4px 3px 4px 3px;
min-width: 12em;
}

 

What am I doing wrong?  The form search.php has to be 'get' for the actual search once the 'submit' button is clicked to work.

 

[attachment deleted by admin]

[sparklechic007]

OK so I stripped it down and found out I had a few errors to do with browser compatibility.

 

I'm still unable to pull the query results from searchS.php and populate the text field.

 

I think it has something to do with this line:

 

searchReq.open("GET", 'searchS.php?search=' + str, true);

 

The URL changes to searchS.php?search= (plus whatever the user input is but no autocomplete in the textfield).

 

My JS file now looks like this:

<script language='JavaScript' type="text/javascript">
function getXmlHttpRequest(){
var xmlhttp;
if(window.XMLHttpRequest){
	xmlhttp = new XMLHttpRequest();
	} else{
		try{
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");
		}
		catch(e1){
			try{
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} 
			catch(e2) {}
		}
	}
	if(!xmlhttp){
		alert('cannot create XMLHTTP instance');
		return false;
		}
		return xmlhttp;
		}

var searchReq = getXmlHttpRequest();
function handleSearchSuggest(){
	var ss = document.getElementById('search_s');
	ss.innerHTML = '';
	var str = searchReq.responseText.split("\n");
	for(i=0; i < str.length - 1; i++){
		var suggest = '<div onmouseover="javascript:suggestOver(this);"';
		suggest += 'onmouseout="javascript:suggestOut(this);"';
		suggest += 'onclick="javascript:setSearch(this.innerHTML);"';
		suggest += 'class="suggest_link">' + str[i] + '<\/div>';
		ss.innerHTML += suggest;
		}
	}
function searchS(){
	if(searchReq.readyState == 4 || searchReq.readyState === 0){
		var str = escape(document.getElementById('q').value);
		searchReq.open("GET", 'searchS.php?search=' + str, true);
		searchReq.onreadystatechange = handleSearchSuggest;
		searchReq.send(null);
		}
	}


	function suggestOver(div_value){
		div_value.className = 'suggest_link_over';
		}
	function suggestOut(div_value){
		div_value.className = 'suggest_link';
		}
	function setSearch(value){
		document.getElementById('q').value = value;
		document.getElementById('search_suggest').innerHTML = '';
		}
</script>

 

The search.php form looks like:

$body .= '
    <form name="searchForm" id="searchForm" action="search.php" method="get">
      <fieldset class="search">
  <legend>Search</legend>
 <p>Search filenames, bookmarks and entities.</p>
        <input type="text" name="q" id="q" size="60" onkeyup="searchS();" autocomplete="off"/>
        <input type="hidden" name="s" value="0" />
        <input type="hidden" name="l" value="10" /><br/><br/>
        <input type="submit" value="Search" name="btn" class="btn"/>
	<div id="search_s"></div>
      </fieldset>
    </form>';

 

And searchS.php is attached

 

[attachment deleted by admin]

[sparklechic007]

was problem with JS, solved it myself