Question

我使用一个简单的ajax脚本，它在输入字段中使用onkeyup返回找到的记录。

问题：

一旦从通话中返回了一条记录，无论输入是什么输入，或者字符串是否在现场延迟，它都将保留在屏幕上。

样品：

假设表单字段上输入的字符串是单词red。

红色打印到屏幕上。

如果在返回后添加了字母i，它仍显示为红色。我需要它什么都不显示。

不确定问题是否在就绪状态。

<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

因此，您希望在每input1之后清除keyup的内容？

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

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

这将清除每个keyup上的元素，然后Ajax会在以后填充它。

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

Answer 2

要取消任何现有的Ajax请求，请使用以下内容：

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

这将创建一个闭包，每次都会引用相同的xmlhttp对象。我没有对此进行过广泛的测试，但它至少应该指向正确的方向。

onkeyup Ajax呼叫和实时搜索

2 个答案: