Chosen: Rendre les libellés optgroup cliquables

Ce sera utile, mais standart html-select ne le permet pas.

@Fr3nzzy : oui, mais si c'était facultatif, ce ne serait pas un problème, n'est-ce pas ?

@Fr3nzzy : si je peux me permettre, la sélection html standard ne permet pas non plus de rechercher... mais c'est très pratique, et c'est pourquoi Chosen est génial -- cela améliore la sélection standard. Je suppose que nous pourrions appliquer le même raisonnement ici.

@greg0ire : +1, je cherche aussi ça :o)

@ pilap82 Cependant, select prend en charge la recherche d'un élément en tapant son nom.

assez juste :)

Ce n'est peut-être pas le meilleur endroit pour un patch, mais j'espère que cela pourra vous aider :

$( '.chzn-results .group-result' ).each( function () {
    var self      = $( this )
        , options = $( '~li', self )
        , next    = options.filter( '.group-result' ).get( 0 )
    ;
    self.data( 'chzn-options', options.slice( 0, options.index( next ) ) );
} )
.click( function () { 
    $( this ).data( 'chzn-options' ).mouseup()
 } )
.hover( function () { 
    $( this ).data( 'chzn-options' ).addClass( 'highlighted' );
 }, function () { 
    $( this ).data( 'chzn-options' ).removeClass( 'highlighted' );
 } )
.css( { cursor: 'pointer' } );

C'est une bonne idée. Je suis prêt à soumettre une pull request si l'équipe de base serait disposée à la fusionner. Qu'en pensez-vous @pfiller?

échantillon de lot sélectionner avec choisi:

http://vafada.github.com/chosen-dojo/

Bien fait!

J'aimerais que cela soit ajouté à Chosen, mais l'écoute d'événements devrait être ajoutée de manière moins intensive. La solution de @adriengibrat applique un écouteur à chaque groupe qui ne fonctionne pas aussi bien s'il y a des centaines de groupes. Nous avons déjà un événement de clic sur la division des résultats de recherche qui peut être testé par rapport aux groupes d'options. Si l'option est définie, css doit être utilisé pour changer la couleur d'arrière-plan.

+1. Je pensais que lorsque l'optgroup est sélectionné, il désactivera/masquerait (éventuellement) tous ses enfants.

+1 pour cette fonctionnalité

@pfiller une mise à jour sur cette branche ou sur la branche search_improvements ? J'adorerais le voir fusionné avec le maître.

J'ai aussi besoin de groupes sélectionnables. J'ai à l'origine essayé de changer le code - puis j'ai été inspiré par la réponse souvent proposée pour "ignorer le groupe opt et ajouter des espaces pour indenter les sous-éléments". Cela avait l'air affreux, mais puisque Chosen est joliment stylisé par CSS… que diriez-vous d'utiliser une sélection non-optgroup et d'utiliser une classe sur chaque option pour la faire ressembler à un affichage groupé ?

Vous pouvez voir une version de base dans ce violon : http://jsfiddle.net/slothbear/9xqpF/

Je n'ai pas passé beaucoup de temps sur le style, mais vous aurez l'idée. Cela fournit deux fonctionnalités dont j'ai besoin - optgroups sélectionnables et optgroups consultables. Le tout sans optgroups.

Je suis sur le point d'avancer avec cette technique sur mon projet, mais j'attends des retours. Cela semble fonctionner. Pouvez-vous penser à une meilleure façon? Ou des pièges ?

_Je viens de réaliser que je devrais probablement mentionner - que le violon utilise le fork Koenpunt de Chosen, pour activer l'ajout d'options. Mais je ne pense pas que cela affecte cet exemple._

_Je cherche aussi des conseils. Je sais que cette technique est probablement assez éloignée de la philosophie choisie pour rester proche des fonctionnalités select - mais si une option est appropriée pour cette fonctionnalité, je serais heureux de faire le travail._

+1 pour cette fonctionnalité, j'ai trouvé choisi en cherchant un moyen de prendre en charge cette

(Je cherchais à pouvoir sélectionner un titre de groupe OU sélectionner un élément de groupe) selon Slothbear's ci-dessus

Edit: En fin de compte, j'ai imité cela en procédant comme suit.
Notez les classes, j'ai également ajouté .clickable au css qui définit le curseur sur un pointeur.

<select name="category" data-placeholder="Choose a category..." class="chosen-select">
    <option value="group-1 class="group-result clickable">Group Title</option>
    <option value="1" class="group-option">Item Name</option>
    <option value="2" class="group-option">Item Name</option>
</select>

Voici ma solution. Bien qu'il soit spécifique à mes besoins, on peut facilement le modifier et le modifier selon ses besoins.

Exemple:
voitures
-voiture1
-voiture2
-voiture3
avion
-avion1
-plan2

Ce que j'ai fait, c'est de créer une nouvelle option au début de tous les groupes, de cette façon, les options "Tous" viendront juste après les groupes :
voitures
-Toutes les voitures
-voiture1
-voiture2
-voiture3
personnes
-Tout le monde
-personne1
-personne2

Dans 'results_option_build' , passez l'option 'All' à 'result_add_group' comme deuxième paramètre lorsque les données sont un groupe, et ignorez l'option 'All' à l'itération suivante :

si (données.groupe) {
contenu += this.result_add_group(data, _ref[++_i])

Maintenant, allons dans 'result_add_group' et remplaçons le groupe par l'option que nous avons passée, mais gardons le style de groupe :
result_add_group = fonction(groupe, option) {
.
.
revenir "

C'est tout.. Si vous le souhaitez, changez le curseur en pointeur en css.

Aucun de ceux-ci ne semble prendre en compte la capacité de recherche. Par défaut, si vous recherchez une option, elle affichera également l'étiquette du groupe. Cette méthode ne fonctionne pas, si j'ai plusieurs groupes et qu'ils ont des options identiques, cela fera en sorte que je me retrouve avec une liste d'éléments visuellement identiques.

Ce serait très intéressant d'être intégré en option dans la bibliothèque, autant faciliterait la gestion des sélections multiples. Avez-vous fait référence à squeeze dans une version? une salutation

J'ai implémenté cela en utilisant simplement le javascript, c'est un correctif temporaire. Je ne l'utilise pas pour des sélections multiples, je l'utilise pour un regroupement personnalisé. J'ai fini par faire en sorte que les groupes soient des options mais qu'ils ressemblent à des groupes, et j'ai donné aux mots-clés « groupes » que lorsque vous effectuez une recherche pour la sous-option, le groupe s'affichera comme il le ferait normalement dans choose.js http://stackoverflow. com/q/22336052/744228

J'ai ajouté ceci dans ma copie locale de choisi parce que c'était une exigence pour mon projet. C'était assez facile au final.

Dans la fonction set_default_values j'ai mis this.group_selectable = this.options.group_selectable != null ? this.options.group_selectable === true : false; à la fin.

Puis dans result_add_group j'ai changé les classes assignées au groupe pour être

if (this.group_selectable) {
        group_el.className = "active-result group-result";
      } else {
        group_el.className = "group-result";
      }
group_el.setAttribute("data-group-array-index", group.array_index);

Et enfin et surtout dans result_select un peu de hack et ajouté

if (high[0].getAttribute("data-group-array-index")) {
          var that = this;
          high.nextUntil('.group-result').each(function(index, element) {
            that.result_highlight = $(element);
            that.result_select(evt);
          });
        }

juste avant
item = this.results_data[high[0].getAttribute("data-option-array-index")];

Voir le code complet sur https://gist.github.com/ruhley/9944574

https://gist.github.com/ruhley/9944574#file -chosen-jquery-js-L1005

var itm = that.results_data[element.getAttribute("data-option-array-index")];
if(itm && !itm.selected){
    that.result_highlight = $(element);
    that.result_select(evt);
}

Un peu tard pour la fête, mais : +1 pour cette fonctionnalité !

@ruhley +1 pour votre solution, fonctionne à merveille !
Juste un petit détail qui est dans la page de code complète mais pas dans le segment de code : il y a un
autre{
manquant à la fin.

Salut,
Merci @ruhley pour ton code.
Mais avec vos modifications, le groupe n'est pas désactivé après avoir été cliqué et peut être resélectionné.

Voici mes améliorations (basées sur la 1.4.2) choisie :

• Après la ligne 158, dans la fonction "set_default_values", ajoutez :

this.group_selectable = this.options.group_selectable != null ? this.options.group_selectable === true : false;

_Ajout du paramètre_

• Changer la ligne 222, dans la fonction "results_option_build", avec :

content += this.result_add_group(data, _ref.slice(_i+1, _i+data.children+1));

_Donnez les enfants à la fonction "result_add_group"._

• Modification de la ligne 272, redéfinition de la fonction "result_add_group", par :

AbstractChosen.prototype.result_add_group = function(group, childrens) {

_Pour recevoir les enfants_

• Après la ligne 285 ( group_el = document.createElement("li"); ), dans la fonction "result_add_group", ajoutez :

if (this.group_selectable) {
  var all = true;
  $.each(childrens, function(index, element) {
    if(!element.selected){
      all = false;
    }
  });
  if(!all) {
    classes.push("active-result");
  } else {
    classes.push("result-selected");
  }
}
group_el.setAttribute("data-group-array-index", group.array_index);

_Cela rend le groupe cliquable si au moins un enfant n'est pas sélectionné. (cette partie est améliorable grâce à la variable "all")._

• Après la ligne 1052 ( high.addClass("result-selected"); ), dans la fonction "result_select", ajoutez :

if (high[0].getAttribute("data-group-array-index")) {
  var that = this;
  high.nextUntil('.group-result').each(function(index, element) {
    if($(element).hasClass('active-result')) {
      that.result_highlight = $(element);
      that.result_select(evt); 
    }
  });
} else {

_Ceci n'ajoute que les enfants non sélectionnés._

• Après la ligne 1083, dans la fonction "result_select":

}

_Besoin de fermer la condition d'un groupe cliqué._

N'oubliez pas d'indenter correctement ce morceau de code ;)

Voici une version complète de mon fichier : https://gist.github.com/GuillaumeSTEIN/7a4ece3c6bb487d16df0
Voici un diff (1 an disponible) : https://www.diffnow.com/?report=8zhe9
S'amuser

Cela n'est-il toujours pas mis en œuvre ?

@GuillaumeSTEIN J'ai essayé votre script de version complète, rien ne semble changer.
Dois-je ajouter des paramètres ou des classes spéciaux au HTML pour que cela fonctionne ?
Peut-être pouvez-vous créer un exemple fonctionnel sur http://codepen.io/ ou jsfiddle ?

Oui, vous devez définir l'option : group_selectable sur true pour activer cette fonctionnalité

merci @GuillaumeSTEIN , cela a fonctionné, mais ce qui me manque dans le script @adriengibrat , c'est de mettre en évidence toutes les options du groupe actuel.

les groupes sélectionnés ont une classe « sélectionné par les résultats ».
Vous pouvez faire du CSS. Voici ce que j'ai écrit, vous devrez peut-être l'adapter à vos besoins :

 select.form-control + .chosen-container-multi .chosen-results li.result-selected{
     display: list-item;
     color: #ccc;
     cursor: default;
     background-color: white;
 }

J'ai tenté le coup #2678

Ce serait une fonctionnalité tellement utile! J'aimerais bien le voir mis en œuvre !

+1 pour cette fonctionnalité.

Si quelqu'un trouve cela utile, je récupère @slothbear jsfiddle et l'améliore avec :

• Bouton "Effacer tout"
• La sélection de l'élément de catégorie racine désactive et désélectionne les enfants. Pourquoi ? Dans mon cas, j'utiliserais choisi pour générer un filtre hiérarchique, où la sélection d'un nœud père implique que la recherche sur chaque catégorie d'enfants, et nous ne souhaitons pas polluer l'interface utilisateur en mettant tous les enfants comme sélectionnés.

http://jsfiddle.net/Zardoz/pf6dhrbc/6/

Je viens de passer à la version 1.8.3 choisie afin que les résultats restent ouverts après avoir sélectionné un résultat sur une sélection multiple (ajouté dans la version 1.7.0). Excellente fonctionnalité, heureux qu'il ait été ajouté. Cependant, j'avais utilisé 1.6.1 et utilisé le code ici pour permettre à un groupe entier d'être ajouté en cliquant sur le nom du groupe : http://robido.com/jquery/add-selectdeselect-optgroup-click-events-harvests- plugin-jquery-choisi/

Ce code a très bien fonctionné, jusqu'à maintenant. L'utilisation de la 1.8.3 et de hide_results_on_ select:false provoque une rupture et sélectionne uniquement l'option de résultat actuellement en surbrillance. Lorsque cette ligne est supprimée (en la rétablissant par défaut sur true, masquer lors de la sélection), cela fonctionne correctement et sélectionne l'ensemble des options de résultats du groupe. Donc, quelque chose dans hide_results_on_ select:false casse/interfère avec la possibilité de rassembler tous les non .result-selected sous un .group-result. Sacrifier cette capacité pour la nouvelle fonctionnalité est brutal.

Je vais parcourir tous les commentaires ci-dessus pour voir si cela a été traité comme un défaut de la nouvelle fonctionnalité, mais je ne peux pas dire quelle version les gens utilisent lorsqu'ils testent cela.

Des idées?

d'accord. j'en ai eu assez. La "mise à niveau" vers la 1.8.3 n'a été qu'un jeu de coup de taupe la semaine dernière. problèmes css, problèmes d'activité inattendus, etc. est-ce que - tout cela n'attend rien. les performances sur une seule sélection avec de nombreuses options ont ralenti d'une manière ou d'une autre. et d'autres problèmes trop nombreux pour être énumérés ici. bon travail pour maintenir cette chose pendant tant d'années, je l'ai apprécié. mais les améliorations se sont soldées par une dégradation de l'expérience utilisateur et je ne peux pas l'avoir. Je recherche comment retirer choisi et utiliser select2. c'est 2018, il est temps de trouver un outil de choix qui répond aux attentes des utilisateurs, qui sont de plus en plus difficiles à satisfaire. désolé et merci

Je suis également passé à select2, mais je n'ai pas fait de vidage sur choisi avant cela. Vous avez une drôle de façon de dire "merci".

Bonjour,
Si vous souhaitez utiliser optgroup et pouvoir cliquer dessus et ajouter automatiquement toutes les options de ce groupe, ajoutez simplement ceci à votre javascript : (le déclencheur d'événement ".group-result" peut être plus restrictif)

Je suis sûr que cela peut être ajouté à la classe AbstractChosen, avec quelque chose comme AbstractChosen.prototype.optgroup_click = function(evt) ....

$('body').on('click','.group-result',function(){
    // id of select
    var quest=$(this).parent().parent().parent().attr('id');
    quest='#'+quest.substring(0,quest.lastIndexOf('_'));
    // number of optgroup
    var total=$(quest+' optgroup').length;
    // number of group after group-result clicked
    var nb=0;
    $(this).nextAll().each(function(){
        if($(this).hasClass('group-result'))nb++;
    });
    // for clicked group-result, select options in the right select tag by position
    $(quest+' optgroup:nth-of-type('+(total-nb)+')').children().each(function(){
        $(this).prop('selected','selected');
    });
    // update chosen !
    $(quest).trigger('chosen:updated');
});

J'ai utilisé bootstrap-select et j'avais également du mal à trouver quelque chose pour pouvoir cliquer sur l'optgroup et sélectionner tous ses éléments - Ce lien a réellement fonctionné pour moi, j'espère que cela vous aidera : https://stackoverflow.com/questions/41821115 /select-deselect-optgroup-based-on-option-select-in-select-picker-boostrap