IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

UI autocomplete : ajouter une "croix" pour supprimer l'option courante


Sujet :

jQuery

  1. #1
    Membre averti

    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Mai 2010
    Messages
    246
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : Mai 2010
    Messages : 246
    Points : 402
    Points
    402
    Par défaut UI autocomplete : ajouter une "croix" pour supprimer l'option courante
    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.
    C'est en aidant les autres qu'on en apprend beaucoup soi-même

  2. #2
    Membre averti
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    207
    Détails du profil
    Informations personnelles :
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Novembre 2010
    Messages : 207
    Points : 344
    Points
    344
    Par défaut
    Voilà la solution à ta question :
    http://jqueryui.com/demos/autocomplete/#custom-data
    Voir code source de l'exemple renderItem.
    Sébastien Courjean
    Développeur Web
    scourjean@cyres.fr
    http://www.cyres.fr/

  3. #3
    Membre averti

    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Mai 2010
    Messages
    246
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : Mai 2010
    Messages : 246
    Points : 402
    Points
    402
    Par défaut
    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
    C'est en aidant les autres qu'on en apprend beaucoup soi-même

  4. #4
    Membre averti

    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Mai 2010
    Messages
    246
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : Mai 2010
    Messages : 246
    Points : 402
    Points
    402
    Par défaut
    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 : 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>"+"<img src=\"cross10w.png\" align=\"right\" />"+ item.value + "</a>" )
            .appendTo( ul );
    };
    C'est en aidant les autres qu'on en apprend beaucoup soi-même

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. QGIS : lenteur pour afficher les listes des vues dans &quot;Ajouter une table PostGIS&quot;
    Par fafa63 dans le forum SIG : Système d'information Géographique
    Réponses: 2
    Dernier message: 11/07/2014, 19h04
  2. Ajouter une barre de zoom pour Zedgraph
    Par megamario dans le forum VB.NET
    Réponses: 6
    Dernier message: 20/07/2010, 08h03
  3. ajoute une date de reunion pour plusieur enregistrement
    Par popofpopof dans le forum VBA Access
    Réponses: 9
    Dernier message: 10/08/2007, 16h08

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo