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:
    533
    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:
    9 162
    J'aime reçus:
    337
    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 983
    J'aime reçus:
    331
    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:
    533
    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:
    533
    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
Search Console Probleme Meta title & Meta description fiche produit Référencement Google 27 Janvier 2022
Problèmes dans le méta-titre / description + Sitemap Référencement Google 29 Novembre 2021
Problème meta description Wordpress Problèmes de référencement spécifiques à vos sites 14 Avril 2020
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
Problème méta description google Débuter en référencement 26 Août 2014
probleme Script Référencement international (langues, pays) 14 Juin 2014
Problème de meta description et ce que google en fait Problèmes de référencement spécifiques à vos sites 25 Janvier 2014
Problème Javascript compatible IE ? Développement d'un site Web ou d'une appli mobile 15 Octobre 2013
Problème ajax et javascript Développement d'un site Web ou d'une appli mobile 12 Septembre 2013
Problème lors de l'inscription ! Développement d'un site Web ou d'une appli mobile 21 Août 2013
Problème pagination et balise title/description Débuter en référencement 27 Mars 2013