Script JS problème

[sff]

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.

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 :

<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

 

[spout]

Et si tu utilises l'event oninput au lieu de onkeyup ?
Pas facile de comprendre sans URL de test.

 

[rick38]

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

 

[sff]

J'ai tenté de faire cela mais ca ne fonctionne pas

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.

 

[sff]

Finalement j'ai fais ceci :

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