Script JS problème

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par sff, 31 Octobre 2018.

  1. sff
    sff WRInaute impliqué
    Inscrit:
    2 Février 2005
    Messages:
    525
    J'aime reçus:
    0
    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
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 735
    J'aime reçus:
    233
    Et si tu utilises l'event oninput au lieu de onkeyup ?
    Pas facile de comprendre sans URL de test.
     
  3. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 064
    J'aime reçus:
    109
    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).
     
    spout apprécie ceci.
  4. sff
    sff WRInaute impliqué
    Inscrit:
    2 Février 2005
    Messages:
    525
    J'aime reçus:
    0
    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.
     
  5. sff
    sff WRInaute impliqué
    Inscrit:
    2 Février 2005
    Messages:
    525
    J'aime reçus:
    0
    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
     
Chargement...
Similar Threads - Script problème Forum Date
Problème de description dans les serps Problèmes de référencement spécifiques à vos sites 19 Juillet 2019
Problème de conflit javascript Développement d'un site Web ou d'une appli mobile 26 Juin 2017
Probleme de descriptions non mises à jour Crawl et indexation Google, sitemaps 16 Août 2016
Problème au niveau de mes balises Titles et meta description Débuter en référencement 1 Février 2016
Problème meta description et meta titre Débuter en référencement 28 Janvier 2015
probleme fonctionnement script Développement d'un site Web ou d'une appli mobile 4 Janvier 2015
Problème de balise dans ma META description Développement d'un site Web ou d'une appli mobile 7 Octobre 2014
Probleme de META description en double Débuter en référencement 7 Octobre 2014
Problème description dans le cache Google Seulement Problèmes de référencement spécifiques à vos sites 26 Septembre 2014
Adsense script probleme : bannière rogné ! Développement d'un site Web ou d'une appli mobile 11 Septembre 2014
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice