代码之家 › 专栏 › 技术社区 › Codex73

OnkeyUp Ajax调用和实时搜索

ajax javascript php

Codex73 · 技术社区 · 14 年前

我使用一个简单的Ajax脚本,它返回使用 onkeyup 在输入字段中。

问题:

一旦一条记录从调用中返回,它将保持在屏幕上打印,无论进行什么输入,或者字符串是否在字段上延迟。

Sample:

假设在表单域中键入的字符串是单词 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>

2 回复 | 直到 12 年前

palswim 14 年前

所以你要清除 input1 每一次之后 keyup ?

为此,您可以添加一个呼叫以清除 输入1 在函数开始时,如下所示:

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

这将清除你的元素 弹起 然后Ajax会在稍后填充它。

您希望在 弹起 处理程序,以确保任何过时的请求不会导致显示错误的内容。我稍后再看是否可以粘贴一些代码。

palswim 14 年前

要取消任何现有的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 每次对象。我没有做过广泛的测试,但它至少能为你指明正确的方向。