Script JS problème

WRInaute impliqué
onjour,

j'ai un problème avec un input "autocomplète" qui me renvoi bien le résultat mais qui l'efface aussitôt.la plupart du temps.

Code:
function showResult(str) {
    
    xhr = createRequestObject();
    xhr.open("POST","?page=ajax_refresh",true);       
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function() {
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
            document.getElementById("livesearch").innerHTML=this.responseText; 
        }
    }

    xhr.send("keyword=" + str);   
}

Html :

HTML:
<form>
<input type="text" size="30" title="Saisi ta ville ou code postal" placeholder="Saisi ta ville ou code postal" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

Lorsque je rempli l'input, j'ai bien le résultat qui s'affiche dans la balise livesearch mais il s'efface très régulièrement au bout d'une demi seconde sans que je comprenne le problème.

this.responseText; renvoi le résultat puis plus rien.

Si quelqu'un à une idée je suis preneur. Merci
 
WRInaute accro
Et si tu utilises l'event oninput au lieu de onkeyup ?
Pas facile de comprendre sans URL de test.
 
WRInaute passionné
Déjà c'est pas très propre, tu envoies une requête à chaque appui d'une touche, il faut mieux annuler la précédente (un truc du genre xhr.abort() si xhr est déjà créé, et sinon le créer car en plus ici xhr sans "var" est global donc inutile de le recréer à chaque fois).
 
WRInaute impliqué
J'ai tenté de faire cela mais ca ne fonctionne pas

Code:
function showResult(str) {
    
    if(XMLHttpRequest)
    {
        XMLHttpRequest.abort();

    }else{
        
        xhr = createRequestObject();

        xhr.open("POST","?page=ajax_refresh",true);       
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        xhr.onreadystatechange = function() {
            if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
                document.getElementById("livesearch").innerHTML=this.responseText; //TESTER EN LOCAL ET TRAVAILLER EN LOCAL
            }
        }

        xhr.send("keyword=" + str);
    }
}

Cela me donne XMLHttpRequest.abort(); is not a fonction.
 
WRInaute impliqué
Finalement j'ai fais ceci :

Code:
function showResult(str) {
   
    if(!xhr){
        xhr = createRequestObject();
    }

    xhr.open("POST","?page=ajax_refresh",true);      
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function() {
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
            document.getElementById("livesearch").innerHTML=this.responseText; //TESTER EN LOCAL ET TRAVAILLER EN LOCAL
        }
    }

    xhr.send("keyword=" + str);
}

Je n'ai par conséquent plus le problème initial. Merci pour votre aide
 
Discussions similaires
Haut