Bonjour amis agrumes,
je suis entrain de réaliser un tp sur l'auto-complétion (en suivant un excellent tutoriel sur le javascript réalisé par un agrume de ce site) qui ressemble à celui de la barre d'adresse des navigateurs. Mon problème réside dans le fait que lorsque je choisis un mot qui apparaît dans la liste des résultats proposés par mon auto-complétion, et bien cette dernière (l'auto-complétion) ne fonctionne plus jusqu'à ce que je vide le mot qui se trouve dans mon champ texte. Voici la structure HTML de mon tp.
1 2 3 4 5 | <form class="col-md-4" method="post" action="traitement.php" id="myForm"> <input type="text" autocomplete="off" class="form-control" name="ville" id="ville"> <div class="panel panel-default" id="resultat"> </div> </form> |
C'est dans le <div class="panel"..> que je mets mes résultats. Niveau javascript voici ce que je fais.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | //on récupère les champ de saisie et de résultat, ainsi que le formulaire var ville = document.getElementById('ville'), resultat = document.getElementById('resultat') myForm = document.getElementById('myForm'); //on instancie l'objet qui sert à effectuer requête ajax var xhr = new XMLHttpRequest(); //on rajoute les évènements qu'il faut myForm.addEventListener('submit', function(e){ e.preventDefault(); }, false); ville.addEventListener('keyup', function(e){ //on vide les précédents résultats de la recherche resultat.innerHTML = ''; resultat.style.display = 'none'; //Si l'utilisateur tape sur entrée, on efface les résultats de recherche if(e.keyCode == 13) { e.target.nextElementSibling.innerHTML = ''; e.target.nextElementSibling.style.display = 'none'; } if (xhr.readyState !== xhr.UNSENT) //S'il y a une requête en cours, on l'annule xhr.abort(); console.log(xhr); //préparation de la requête xhr.open('POST', 'traitement.php'); //on récupère le formulaire var formulaire = document.getElementById('myForm'), form = new FormData(formulaire); //envoi du formulaire xhr.send(form); }, false); //traitement de la réponse xhr.addEventListener('loadend', function(){ if(xhr.status == 200) //si la requête s'est bien déroulée { //on récupère les résultats var results = xhr.responseText.split('|'); //S'il y a des résultats, alors on construit le bloc de résultats if(xhr.responseText != "") { //on rend visible le bloc des résultats resultat.style.display = 'block'; for (var i = 0, c = results.length; i < c; i++) { var div = document.createElement('div'); div.classList.add('supposition'); div.appendChild(document.createTextNode(results[i])); resultat.appendChild(div); } } } }, false); |
je n'ai pas mis toutes mes gestions d'évènements car je me dis que ça n'influence pas le résultat.
Aussi, par moment, je me retrouve avec une réponse de ce genre dans mon champ texte
1 | <div class="supposition"></div> |
En gros, j'ai le HTML d'un résultat vide qui s'incruste dans mon champ texte, je ne sais pas trop pourquoi. Si quelqu'un peut bien regarder ce qui ne va pas dans mon code, ce serait sympa.
Cordialement.
Edit Ymox
Correction du tag dans le titre