Discussion :

[michon]

Bonjour,

J'arrive à la fin de ma belle customisation de l'autocomplete, mais un dernier petit soucis persiste : Tout marche très bien sur tous les navigateurs testés (Opera / Firefox / Chrome / IE ), mais un problème d'affichage survient sur... IE !

Je continue de chercher de mon côté, mais pour le moment je ne vois pas ce qui peu poser problème. Voici l'affichage pour Opera / Firefox / Chrome :



Et voici l'affichage sous IE :



Comme vous pouvez le voir, sous IE, l'image de la croix s'affiche sur la ligne du dessous... alors qu'elle devrait être sur la même ligne que le texte. (ps : le boutton est bien présent sous IE, il est juste decallé sur la droite donc caché par l'affichage des options )

voici le code responsable de l'affichage de ces options :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
//Autocomplete
$("#autocomplete").autocomplete({ 
    minLength: 0,
    source: getCookie()
    })
 
.data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>"+ item.value +"<img src=\"cross10w.png\" align=\"right\" onmouseover=\"crossMouseOver(this)\" onmouseout=\"crossMouseOut()\" />" + "</a>" )
    .appendTo( ul );
};

[michon]

problème résolu, cela s'affiche désormais bien sous IE également.

J'ai modifié la ligne suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.append( "<a>"+ item.value +"<img src=\"cross10w.png\" align=\"right\" onmouseover=\"crossMouseOver(this)\" onmouseout=\"crossMouseOut()\" />" + "</a>" )

En plaçant le "item.value" après la déclaration de l'image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
.append( "<a>" +"<img src=\"cross10w.png\" align=\"right\" onmouseover=\"crossMouseOver(this)\" onmouseout=\"crossMouseOut()\" />" + item.value + "</a>" )

Par contre, je ne comprends ici ce que cela à changé... car j'ai testé un peu à taton pour voir comment l'affichage réagissait, et il se trouve que cette solution convient à tous les navigateurs...

Quelqu'un sait-il m'expliquer pourquoi ?