onkeyup Ajax Call and Live Search

Question

I using a simple ajax script which returns found records using onkeyup in input field.

The problem:

Once a record has been returned from call it will stay printed on screen no matter what input is made or if string is latered on field.

Sample:

Lets say the string typed on form field is the word red.

red gets printed to screen.

if the letter i is added after this been returned, it still shows red. i need it to show nothing.

Unsure if the problem lies on the readystate.

<script type="text/javascript">
function showResult(str)
{
if (str.length==0)
  {
  document.getElementById("input1").innerHTML="";
  document.getElementById("input1").style.border="0px";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200 && xmlhttp.responseText!='')
    {
    document.getElementById("input1").innerHTML=xmlhttp.responseText;
    document.getElementById("input1").style.border="1px solid #A5ACB2";
    }
  }
xmlhttp.open("GET","getajax.php?q="+str,true);
xmlhttp.send();
}
</script> 

Answer 1

So you want to clear the contents of input1 after every keyup?

For that, you would add a call to clear input1 at the beginning of your function, like this:

function showResult(str)
{
    document.getElementById("input1").innerHTML = "";

This would clear your element on every keyup and then the Ajax would fill it later.

You'd want to cancel any existing Ajax requests at the beginning of the keyup handler as well, to make sure any outdated request wouldn't cause the display of the wrong thing. I'll see if I can paste some code for that later.

Answer 2

To cancel any existing Ajax requests, use something like this:

function init()
{
    var xmlhttp;
    document.getElementById("ElemInput").onkeyup = function showResult(str)
    {
        if (xmlhttp && xmlhttp.abort) // probably won't work in IE < 7
            xmlhttp.abort(); // cancel AJAX request
        document.getElementById("input1").innerHTML = "";
        if (str.length == 0)
        {
            document.getElementById("input1").style.border = "0px";
            return;
        }
        if (xmlhttp) {} // Do nothing - reuse the object
        else if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        else // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

        xmlhttp.onreadystatechange = function()
        {
            if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200) && (xmlhttp.responseText!=''))
            {
                document.getElementById("input1").innerHTML = xmlhttp.responseText;
                document.getElementById("input1").style.border = "1px solid #A5ACB2";
            }
        }
        xmlhttp.open("GET","getajax.php?q="+str,true);
        xmlhttp.send();
    }
}

window.addEventListener("load", init, false); // for Firefox; for IE, try window.attachEvent

This will create a closure where you will reference the same xmlhttp object each time. I haven't tested this extensively, but it should at least point you in the right direction.