onkeyup Ajax調用和實時搜索

我使用一個簡單的ajax腳本，它在輸入字段中使用onkeyup返回找到的記錄。onkeyup Ajax調用和實時搜索

的問題：一旦記錄已被從調用返回

它將保持顯示在屏幕上，無論是用哪種輸入或者字符串現場latered。

樣品：

比方說上鍵入表單字段中的字符串是單詞red。

紅色被打印到屏幕上。

如果信函i在返回後添加，它仍然顯示爲紅色。我需要它什麼都不顯示。

不確定問題是否存在於ready狀態。

<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>

來源

2010-09-02 Codex73

所以，你希望每個keyup後清除的input1內容？

對於這一點，您將添加一個電話在你的函數的開始清除input1，像這樣：

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

這將清除每個keyup你的元素，然後阿賈克斯後來填充它。

您也想要取消keyup處理程序開始處的任何現有Ajax請求，以確保任何過期的請求不會導致顯示錯誤的內容。我會看看我是否可以稍後粘貼一些代碼。

來源

2010-09-02 21:55:43 palswim

謝謝！這工作。 – Codex73 2010-09-03 02:12:05

如上所述，我該如何解決「取消任何現有的Ajax請求」。任何良好的資源或搜索字符串我可以使用？ – Codex73 2010-09-03 14:13:04

取消任何現有的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對象。我還沒有廣泛地測試過這個，但至少應該指出你的方向是正確的。

來源

2010-09-03 18:25:23 palswim

onkeyup Ajax調用和實時搜索

回答

相關問題