Problème liste déroulante AJAX

- - Dernière réponse : cs_jperre
Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
- 1 nov. 2012 à 17:13
Bonjour les gens,

J'ai actuellement un code qui me permet de faire un select en ajax (XML) qui fonctionne très bien, si ce n'est que lorsque je navigue dans le menu avec les flèches directionnelles et que j'appuie sur la touche entrée, cela ne valide pas mon choix. Contrairement au clic souris qui lui fonctionne à merveille.

C'est un peu embêtant

Je vous laisse la partie intéressante du code :

//Fonction gérant le parcours des éléments à l'aide des touches directionnelles
    selectSuggest = function(direction){
        //On regarde si un élément est selectionné
        var selected = -1;
        var lis = suggestsList.getElementsByTagName('li');
        for(i=0; i<lis.length; i++){
            if(lis[i].id == 'selectedSuggest'){
                selected = i;
            }
            lis[i].id = '';
        }

        selected += direction;
        selected = (selected < -1 ? (lis.length-1) : selected);
        if(selected >= 0 && selected < lis.length){
            lis[selected].id = 'selectedSuggest';
        }
    };

    document.body.onkeyup = function(e){
        var key = (!is_ie ? e.keyCode : window.event.keyCode);
        switch(key){
            case 27: //Esc
                closeSuggest();
                break;
            case 9: //Tab
                //useSelected();
                closeSuggest(true); //On referme la liste sans redonner le focus au champ
                break;
            case 38: //Up
                selectSuggest(-1);
                break
            case 40: //Down
                selectSuggest(1);
                break;
            case 13: //Enter
                useSelected();
                break;
        }
    };
    
    //Remplit le champ avec la suggestion sélectionnée
    useSelected = function(){
        //On regarde si un élément est selectionné
        var lis = suggestsList.getElementsByTagName('li');
        for(i=0; i<lis.length; i++){
            if(lis[i].id == 'selectedSuggest'){
                element.value = lis[i].firstChild.innerHTML;
            }
        }
        closeSuggest(true);
    };
    
    document.body.onclick = function(){
        closeSuggest(true);
    };

    //Fonction servant à cacher les suggestions
    closeSuggest = function(nofocus){
        var todelete = document.createElement('div');
        todelete.appendChild(suggestsList);
        if(!nofocus){
            element.focus();
        }
    };


Si quelqu'un a une idée ...
Afficher la suite 

10 réponses

Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
0
Merci
Avez vous essayé de remplacer :
document.body.onkeyup = function(e){
par :
document.body.onkeydown = function(e){

Bon courage!...
Commenter la réponse de cs_jperre
0
Merci
j'ai essayé, et en vain...
Rien ne change, merci quand même de votre contribution
Commenter la réponse de nicotontige
Messages postés
13
Date d'inscription
samedi 19 juillet 2003
Statut
Membre
Dernière intervention
4 octobre 2012
0
Merci
Hello, et ceci ?

document.onkeydown

document.onkeydown = function(){
closeSuggest(true);
};
Commenter la réponse de Mik4do
0
Merci
Bonjour Mik4do,

Malheureusement ta réponse revient à la même que proposé par jperre.
De plus je ne peux faire une fonction seule de la sorte, vu que je traite aussi les touches ESC, TAB, UP, DOWN.

j'ai donc essayé :
document.body.onkeydown = function(e){
        var key = (!is_ie ? e.keyCode : window.event.keyCode);
        switch(key){
            case 27: //Esc
                closeSuggest();
                break;
            case 9: //Tab
                //useSelected();
                closeSuggest(true);
                break;
            case 38: //Up
                selectSuggest(-1);
                break
            case 40: //Down
                selectSuggest(1);
                break;
            case 13: //Enter
                closeSuggest(true);
                break;
        }
    };


Mais rien n'y fait .
La sélection a bien lieu (la valeur dans la liste déroulante à bien été choisis), mais les informations qui devrait être remplis dans d'autres input n'apparaissent pas.
Commenter la réponse de nicotontige
Messages postés
13
Date d'inscription
samedi 19 juillet 2003
Statut
Membre
Dernière intervention
4 octobre 2012
0
Merci
Okey, désolé.
T'as essayé avec un autre navigateur ? Pour voir si le souci ne viendrait pas de là aussi ?
Commenter la réponse de Mik4do
0
Merci
Malheureusement c'est pareil pour firefox, opéra et IE...
Commenter la réponse de nicotontige
Messages postés
13
Date d'inscription
samedi 19 juillet 2003
Statut
Membre
Dernière intervention
4 octobre 2012
0
Merci
Tu l'as mis sur un serveur pour tester ? Ou faire tester ?
Commenter la réponse de Mik4do
0
Merci
Oui j'ai déjà testé, et fait testé.
En local ou serveur de prod, même résultat :/
Commenter la réponse de nicotontige
Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
0
Merci
Je crois avoir trouvé la réponse à votre problème. Il existe une nouvelle propriété de l'objet event qui s'applique à tous les navigateurs sauf IE 8 et les versions antérieures. Cette propriété s'appelle la propriété which
Le code suivant devrait fonctionner :


document.body.onkeyup = function(e){
var x;
if (e==window.event) { //IE8 et versions antérieures
x=e.keyCode;
}
else if {e.which) { //IE8 - Firefox - Chrome - Opera - Safari
x=e.which
}
switch(x){
case 27: //Esc
closeSuggest();
break;
case 9: //Tab
//useSelected();
closeSuggest(true); //On referme la liste sans redonner le focus au champ
break;
case 38: //Up
selectSuggest(-1);
break
case 40: //Down
selectSuggest(1);
break;
case 13: //Enter
useSelected();
break;
}
};
Commenter la réponse de cs_jperre
Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
0
Merci
Erratum: Dans le commentaire de la ligne :
else if {e.which) { //IE8 - Firefox - Chrome - Opera - Safari
il faut lire :
else if {e.which) { //IE9 - Firefox - Chrome - Opera - Safari
Commenter la réponse de cs_jperre