onkeyup Ajax Appel et Live Search

Question

J'utilise un simple script ajax qui renvoie les enregistrements trouvés en utilisant onkeyup dans le champ de saisie.

Le problème:

Une fois qu'un enregistrement a été renvoyé de l'appel, il sera imprimé à l'écran rester peu importe ce que l'entrée est faite ou si la chaîne est latered sur le champ.

Exemple:

la chaîne permet de dire tapé sur le champ de formulaire est le mot red.

Le rouge est imprimé sur l'écran.

si la lettre i est ajoutée après que cela a été retourné, il affiche toujours rouge. j'en ai besoin pour ne rien montrer.

Incertain si le problème réside sur le magasin de données.

<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

Vous voulez effacer le contenu de input1 après chaque keyup?

Pour cela, vous devez ajouter un appel à effacer input1 au début de votre fonction, comme ceci:

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

Cela réglerait votre élément sur tous les keyup et l'Ajax remplirait plus tard.

Vous souhaiterez également annuler toutes les demandes Ajax existantes au début du gestionnaire keyup afin de vous assurer qu'une demande obsolète ne provoquerait pas l'affichage d'une erreur. Je vais voir si je peux coller du code pour ça plus tard.

Answer 2

Pour annuler les requêtes Ajax existantes, utilisez quelque chose comme ceci:

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 

Cela va créer une fermeture où vous référence à la même xmlhttp objet chaque fois. Je n'ai pas testé cela de manière approfondie, mais cela devrait au moins vous indiquer la bonne direction.