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]