AJAX 'Searching...' Message

[Jim7283]

Hi All,

I'm trying to come up with a way to improve a simple AJAX script that I am currently running. Basically it is a dynamic search function where a user enters some keywords into a field:


<input type="text" name="keywords" style="width:300px; margin:6px 0 10px 140px; font-size:16px; padding:2px;" onkeyup="htmlData('admin/ajax/ajaxarticlesearch.php', 'keywords='+this.value)" />


And as they type the 'ajaxarticlesearch.php' queries the database a prints a table of matching results below the field. Everything is working properly it's just that the script is VERY SLOW! Depending on the number of results there can be a 5 second+ delay (sometimes nearly 20 seconds) which seems like 'dead air' while the user is waiting for the results to display.

How would I go about printing a message such as 'Searching...' right below the text field while the query is running? I believe I'll need a listener to handle this, but I'm not clear on how to ONLY make it appear while the script is still processing, then hide when the script is idle. Any ideas?

[Jim7283]

I'm still pretty green when it comes to AJAX, but here is what I have so far - any improvements you can suggest would be appreciated!


function htmlData(url, qStr)
{
if (url.length==0)
{
document.getElementById("status").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}

url=url+"?"+qStr;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==3)
{
document.getElementById("status").innerHTML="Searching...";
}
if (xmlHttp.readyState==4)
{
document.getElementById("response").innerHTML=xmlHttp.responseText;
}
}

[Jim7283]

I just about had it - just needed to update the 'status' ID in both states:


function stateChanged()
{
if (xmlHttp.readyState==1)
{
document.getElementById("status").innerHTML="Searching...";
}
if (xmlHttp.readyState==4)
{
document.getElementById("status").innerHTML="";
document.getElementById("response").innerHTML=xmlHttp.responseText;
}
}

[AnthonyDamasco]

you could just have an onclick(); rollover and just display a load-bar image