onkeyup Ajax Call и Live Search

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

Чтобы отменить любые существующие запросы 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 каждый раз.Я не проверял это подробно, но это должно, по крайней мере, указать вам правильное направление.

Answer 2

То есть вы хотите очищать содержимое input1 после каждого keyup?

. Для этого вы добавили бы вызов очистки input1 в начале вашей функции, например так:

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

Это очистит ваш элемент при каждом keyup, а затем Ajax заполнит его позже.

Вы хотите отменить любые существующие запросы Ajax в начале keyup обработчик, чтобы убедиться, что любой устаревший запрос не приведет к отображению неправильной вещи.Я посмотрю, смогу ли я вставить код для этого позже.