UI autocomplete : ajouter une "croix" pour supprimer l'option courante [Résolu]

[michon]

Bonjour,

Après quelques péripéties, un nouveau problème se pose à moi, et j'espère que quelqu'un pourra m'aider...

Plutôt que faire une grande phrase, un exemple de ce que j'aimerais sera bien plus parlant. Voici un exemple de fonctionnement de l'autocomplete :



ce que j'aimerais, c'est pouvoir ajouter une petite crois sur la droite de l'option qui, si cliqué, supprime l'option de la liste.

cela ressemblerais en gros à (via paint !) :



Mon problème est juste pour le placement et du bouton et son association à l'option. J'ai déja implémenté la fonction du suppression qui fonctionne bien (via la touche "suppr" uniquement pour le moment)

je ne pense pas que mon code actuel soit ici utile, mais si c'est nécessaire, je posterais les parties concernées.

[scourjean]

Voilà la solution à ta question :
http://jqueryui.com/demos/autocomplete/#custom-data
Voir code source de l'exemple renderItem.

[michon]

Parfait !

Après un peu de temps à tout bien comprendre, j'arrive afficher les images à côté des résultats !

Bon, il faut que je me lance sous gimp pour faire des belles images à fond transparent maintenant... puis repérer les click souris sur cette image...

Encore merci pour les infos

[michon]

je viens de remarquer que je n'avais pas posté la solution à mon problème. Au cas ou cela puisse en aider d'autres :

Code :

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>"+"<img src=\"cross10w.png\" align=\"right\" />"+ item.value + "</a>" )
        .appendTo( ul );
};