Php onkeyup Ajax调用和实时搜索

我使用了一个简单的ajax脚本，它使用输入字段中的

onkeyup

返回找到的记录

问题是：

一旦一条记录从调用中返回，它将保持打印在屏幕上，无论输入是什么，或者字符串是否在字段中偏侧

样本：

假设表单字段中键入的字符串是单词

red

红色被印在屏幕上

如果在返回后添加字母

i

，它仍然显示红色。 我需要它什么也不显示

不确定问题是否出在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> 

函数显示结果（str）
{
如果（str.length==0）
{
document.getElementById（“input1”）.innerHTML=“”；
document.getElementById（“input1”）.style.border=“0px”；
返回；
}
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200&&xmlhttp.responseText！=''）
{
document.getElementById（“input1”）.innerHTML=xmlhttp.responseText；
document.getElementById（“input1”）.style.border=“1px solid#A5ACB2”；
}
}
open（“GET”，“getajax.php？q=“+str，true”）；
xmlhttp.send（）；
}

那么您想在每次

键控后清除
输入1
的内容吗

为此，您需要在函数开头添加一个清除
input1
的调用，如下所示：

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

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

这将在每个
keyup
上清除您的元素，然后Ajax将稍后填充它

您还需要在
keyup
处理程序的开头取消任何现有的Ajax请求，以确保任何过时的请求不会导致错误的显示。我将看看是否可以在以后粘贴一些代码。
要取消任何现有的Ajax请求，请使用以下内容：

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

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

函数init（）
{
var-xmlhttp；
document.getElementById（“ElemInput”）.onkeyup=函数showResult（str）
{
if（xmlhttp&&xmlhttp.abort）//在IE<7中可能不起作用
xmlhttp.abort（）；//取消AJAX请求
document.getElementById（“input1”）.innerHTML=“”；
如果（str.length==0）
{
document.getElementById（“input1”）.style.border=“0px”；
返回；
}
如果（xmlhttp）{}//什么都不做-重用对象
else if（window.XMLHttpRequest）//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
else//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
xmlhttp.onreadystatechange=函数（）
{
if（（xmlhttp.readyState==4）&&&（xmlhttp.status==200）&&（xmlhttp.responseText！=''）
{
document.getElementById（“input1”）.innerHTML=xmlhttp.responseText；
document.getElementById（“input1”）.style.border=“1px solid#A5ACB2”；
}
}
open（“GET”，“getajax.php？q=“+str，true”）；
xmlhttp.send（）；
}
}
window.addEventListener（“load”，init，false）；//对于Firefox；对于IE，请尝试window.attachEvent

这将创建一个闭包，每次都引用相同的
xmlhttp
对象。我没有对此进行过广泛的测试，但它至少应该为您指明了正确的方向。
如您所述，我如何才能“取消任何现有的Ajax请求”。我可以使用任何好的资源或搜索字符串吗？