Chosen: Machen Sie die Optionsgruppen-Labels anklickbar

Dies wird nützlich sein, aber Standard-HTML-Select lässt dies nicht zu.

@Fr3nzzy : Ja, aber wenn es optional wäre, wäre dies kein Problem, oder?

@Fr3nzzy : Wenn ich darf, erlaubt die Standard-HTML-Auswahl auch keine Suche ... aber es ist sehr praktisch, und deshalb ist Chosen großartig - es verbessert die Standardauswahl. Ich denke, wir könnten hier die gleiche Argumentation anwenden.

@greg0ire : +1, das suche ich auch :o)

@pilap82 Select unterstützt jedoch die Suche nach einem Element über die Eingabe seines Namens.

Meinetwegen :)

Vielleicht nicht der beste Ort für einen Patch, aber ich hoffe, es konnte helfen:

$( '.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' } );

Dies ist eine großartige Idee. Ich bin bereit, einen Pull-Request einzureichen, wenn das Kernteam bereit wäre, ihn zusammenzuführen. Was denkst du @pfiller?

Probe der Charge auswählen mit gewähltem:

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

Gut erledigt!

Ich würde gerne sehen, dass dies zu Chosen hinzugefügt wird, aber Event Listening sollte weniger intensiv hinzugefügt werden. Die Lösung von @adriengibrat wendet auf jede Gruppe einen Listener an, der bei Hunderten von Gruppen nicht so gut funktioniert. Wir haben bereits ein Klickereignis im Suchergebnis-Div, das mit Optionsgruppen getestet werden kann. Wenn die Option gesetzt ist, sollte CSS verwendet werden, um die Hintergrundfarbe zu ändern.

+1. Ich dachte, wenn die optgroup ausgewählt ist, würde sie (optional) alle ihre Kinder deaktivieren/verstecken.

+1 für diese Funktion

@pfiller ein Update zu diesem oder dem search_improvements-Zweig? Würde gerne sehen, dass es mit dem Master zusammengeführt wird.

Ich brauche auch auswählbare Gruppen. Ich habe ursprünglich versucht, den Code zu ändern – und wurde dann von der oft angebotenen Antwort inspiriert, "die optgroup zu überspringen und Leerzeichen hinzuzufügen, um die Unterelemente einzurücken". Das sah schrecklich aus, aber da Chosen von CSS schön gestaltet ist ... wie wäre es mit einer Nicht-Optgroup-Auswahl und einer Klasse für jede Option, damit sie wie eine gruppierte Anzeige aussieht?

Sie können eine Basisversion in dieser Geige sehen: http://jsfiddle.net/slothbear/9xqpF/

Ich habe nicht viel Zeit mit dem Stil verbracht, aber Sie werden die Idee bekommen. Dies bietet zwei Funktionen, die ich benötige – auswählbare Optgroups und durchsuchbare Optgroups. Alles ohne Optgroups.

Ich bin kurz davor, mit dieser Technik in meinem Projekt voranzukommen, aber ich suche nach Feedback. Es scheint zu funktionieren. Können Sie sich einen besseren Weg vorstellen? Oder irgendwelche Fallstricke?

_Ich habe gerade bemerkt, dass ich wahrscheinlich erwähnen sollte – dass Geige die Koenpunt-Gabel von Chosen verwendet, um das Hinzufügen von Optionen zu ermöglichen. Aber ich glaube nicht, dass das dieses Beispiel beeinflusst._

_Ich suche auch Orientierung. Ich weiß, dass diese Technik wahrscheinlich ziemlich weit von der Chosen-Philosophie entfernt ist, um nahe an den select -Funktionen zu bleiben – aber wenn eine Option für diese Funktion geeignet ist, würde ich die Arbeit gerne übernehmen._

+1 für diese Funktion, die ich ausgewählt habe, als ich nach einer Möglichkeit suchte, dies zu unterstützen

(Ich war auf der Suche nach einem Gruppentitel ODER einem Gruppenelement) wie oben von Slothbear

Bearbeiten: Am Ende habe ich dies wie folgt emuliert.
Beachten Sie die Klassen, ich habe auch .clickable zum CSS hinzugefügt, das den Cursor auf einen Zeiger setzt.

<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>

Hier ist meine Lösung. Obwohl es spezifisch für meine Bedürfnisse ist, kann man es leicht anpassen und an seine Bedürfnisse anpassen.

Beispiel:
Autos
-Auto1
-Auto2
-Auto3
Flugzeug
-plane1
-plane2

Was ich getan habe, ist, am Anfang eine neue Option für alle Gruppen zu erstellen, auf diese Weise werden die 'Alle'-Optionen direkt nach den Gruppen kommen:
Autos
-Alle Autos
-Auto1
-auto2
-Auto3
Personen
-Alle Personen
-person1
-person2

Übergeben Sie in 'results_option_build' die Option 'All' an 'result_add_group' als zweiten Parameter, wenn Daten eine Gruppe sind, und überspringen Sie die Option 'All' in der nächsten Iteration:

if (data.group) {
Inhalt += this.result_add_group(data, _ref[++_i])

Gehen wir nun zu 'result_add_group' und ersetzen Sie die Gruppe durch die von uns übergebene Option, aber behalten Sie den Stil der Gruppe bei:
result_add_group = Funktion(Gruppe, Option) {
.
.
Rückkehr "

Das war's.. Wenn Sie möchten, ändern Sie den Cursor in css in einen Zeiger.

Keines davon scheint die Suchfunktion zu berücksichtigen. Wenn Sie nach einer Option suchen, wird standardmäßig auch die Gruppenbezeichnung angezeigt. Diese Methode funktioniert nicht, wenn ich mehrere Gruppen habe und sie identische Optionen haben, führt dies dazu, dass ich am Ende nur eine Liste von visuell identischen Elementen habe.

Wäre sehr interessant als Option in die Bibliothek integriert zu werden, da dies die Verwaltung von Mehrfachauswahl erleichtern würde. Haben Sie in einer Version von Squeeze gesprochen? eine Begrüßung

Ich habe dies nur mit Javascript implementiert, es ist eine vorübergehende Lösung. Ich verwende es jedoch nicht für mehrere Auswahlen, sondern für benutzerdefinierte Gruppierungen. Am Ende habe ich die Gruppen zu Optionen gemacht, die aber wie Gruppen aussehen, und den Schlüsselwörtern 'groups' gegeben, dass, wenn Sie nach der Unteroption suchen, die Gruppe wie normalerweise in selected.js http://stackoverflow angezeigt wird. com/q/22336052/744228

Ich habe dies meiner lokalen Kopie von selected hinzugefügt, da dies eine Voraussetzung für mein Projekt war. Am Ende war es relativ einfach.

In der Funktion set_default_values ich this.group_selectable = this.options.group_selectable != null ? this.options.group_selectable === true : false; am Ende eingefügt.

Dann habe ich in result_add_group die Klassen, die der Gruppe zugewiesen wurden, geändert in

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);

Und zu guter Letzt in result_select ein bisschen gehackt und hinzugefügt

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);
          });
        }

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

Den vollständigen Code finden Sie unter 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);
}

Etwas spät zur Party, aber: +1 für dieses Feature!

@ruhley +1 für deine Lösung, funktioniert wie ein Zauber!
Nur ein kleines Detail, das in der vollständigen Codepage, aber nicht im Codesegment enthalten ist: Es gibt ein
anders{
fehlt am ende.

Hi,
Danke @ruhley für deinen Code.
Aber mit Ihren Modifikationen wird die Gruppe nach dem Anklicken nicht deaktiviert und kann wieder ausgewählt werden.

Hier sind meine Verbesserungen (basierend auf ausgewähltem 1.4.2):

• Fügen Sie nach Zeile 158 in der Funktion "set_default_values" Folgendes hinzu:

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

_Ergänzung des Parameters_

• Ändern Sie Zeile 222 in der Funktion "results_option_build" mit:

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

_Geben Sie die Kinder an die Funktion "result_add_group"._

• Zeile 272, Neudefinition der Funktion "result_add_group" ändern, mit:

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

_Um die Kinder zu empfangen_

• Fügen Sie nach Zeile 285 ( group_el = document.createElement("li"); ) in der Funktion "result_add_group" Folgendes hinzu:

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);

_Dadurch wird die Gruppe anklickbar, wenn nicht mindestens ein Kind ausgewählt ist. (dieser Teil ist wegen der Variable "all" verbesserungsfähig)._

• Fügen Sie nach Zeile 1052 ( high.addClass("result-selected"); ) in der Funktion "result_select" Folgendes hinzu:

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 {

_Hier werden nur nicht ausgewählte Kinder hinzugefügt._

• Nach Zeile 1083 in der Funktion "result_select":

}

_Die Bedingung einer angeklickten Gruppe muss geschlossen werden._

Vergessen Sie nicht, den Code richtig einzurücken ;)

Hier ist eine Vollversion meiner Datei: https://gist.github.com/GuillaumeSTEIN/7a4ece3c6bb487d16df0
Hier ist ein Diff (1 Jahr verfügbar): https://www.diffnow.com/?report=8zhe9
Spaß haben

Ist das immer noch nicht umgesetzt?

@GuillaumeSTEIN Ich habe Ihr Vollversionsskript ausprobiert, nichts scheint sich zu ändern.
Muss ich HTML einige spezielle Parameter oder Klassen hinzufügen, damit es funktioniert?
Vielleicht können Sie ein funktionierendes Beispiel auf http://codepen.io/ oder jsfiddle erstellen?

Ja, Sie müssen Option: group_selectable auf true setzen, um diese Funktion zu aktivieren

danke @GuillaumeSTEIN , es hat funktioniert, aber was ich im @adriengibrat- Skript vermisse, ist das Hervorheben aller Optionen unter der aktuellen Gruppe.

ausgewählte Gruppen haben eine "result-selected"-Klasse.
Sie können etwas CSS machen. Folgendes habe ich geschrieben, Sie müssen es möglicherweise an Ihre Bedürfnisse anpassen:

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

Ich habe es versucht #2678

Das wäre so ein nützliches Feature! Ich würde es gerne umgesetzt sehen!

+1 für diese Funktion.

Wenn das jemand nützlich findet, greife ich zu @slothbear jsfiddle und verbessere es mit:

• Schaltfläche "Alles löschen"
• Durch die Auswahl des Stammkategorieelements werden Kinder deaktiviert und deaktiviert. Wieso den ? In meinem Fall würde ich "selected" verwenden, um einen Hierarchiefilter zu generieren, bei dem die Auswahl eines Vaterknotens die Suche nach jeder Kinderkategorie impliziert, und wir möchten nicht, die Benutzeroberfläche zu verschmutzen, indem alle Kinder als ausgewählt angezeigt werden.

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

Ich habe gerade auf die ausgewählte Version 1.8.3 aktualisiert, damit die Ergebnisse nach der Auswahl eines Ergebnisses bei einer Mehrfachauswahl geöffnet bleiben (in Version 1.7.0 hinzugefügt). Tolle Funktion, froh, dass sie hinzugefügt wurde. Ich hatte jedoch 1.6.1 verwendet und den Code hier verwendet, um das Hinzufügen einer ganzen Gruppe beim Klicken auf den Gruppennamen zu ermöglichen: http://robido.com/jquery/add-selectdeselect-optgroup-click-events-harvests- gewähltes-jquery-plugin/

Dieser Code hat bis jetzt super funktioniert. Die Verwendung von 1.8.3 und hide_results_on_select :false führt dazu, dass etwas kaputt geht, und es wählt nur die aktuell hervorgehobene Ergebnisoption aus. Wenn diese Zeile entfernt wird (Rückstellung auf den Standardwert true, bei Auswahl ausblenden), funktioniert sie einwandfrei und wählt die gesamten Gruppenergebnisoptionen aus. Etwas in hide_results_on_select :false unterbricht/beeinträchtigt also die Fähigkeit, alle nicht .result-selected unter einem .group-result zu sammeln. Diese Fähigkeit für das neue Feature zu opfern, ist brutal.

Ich werde alle obigen Kommentare durchgehen, um zu sehen, ob dies als Fehler des neuen Features behoben wurde, aber ich kann nicht sagen, welche Version die Leute verwenden, wenn sie dies testen.

Irgendwelche Ideen?

okay. Ich habe genug gehabt. Das "Upgrade" auf 1.8.3 war in der letzten Woche nichts anderes als ein Spiel mit einem Maulwurf. CSS-Probleme, unerwartete Aktivitätsprobleme usw. Ich habe ein Upgrade durchgeführt, um die Ergebnisse der Multi-Select-Funktion offen zu halten (deren Implementierung Jahre gedauert hat), aber ich habe festgestellt, dass es bei der Auswahl aus den Ergebnissen immer wieder nach oben springt, also was nützt es? ist das - all das Warten auf nichts. Die Leistung bei einer einzelnen Auswahl mit vielen Optionen hat sich irgendwie verlangsamt. und mehr Probleme zu viele, um sie hier aufzulisten. Gute Arbeit, das Ding so viele Jahre am Laufen zu halten, ich habe es genossen. Aber die Verbesserungen gingen mit einer Verschlechterung der Benutzererfahrung einher, und das kann ich nicht haben. Ich recherchiere, wie man Ausgewählte herauszieht und select2 verwendet. 2018 ist es an der Zeit, ein ausgewähltes Tool zu finden, das mit den immer schwieriger zu erfüllenden Benutzererwartungen Schritt hält. entschuldigung und danke

Ich bin auch zu select2 gewechselt, aber ich habe vorher keinen Dump bei selected gemacht. Du hast eine seltsame Art "Danke" zu sagen.

Hallo,
Wenn Sie optgroup verwenden und darauf klicken und automatisch alle Optionen dieser Gruppe hinzufügen möchten, fügen Sie dies einfach zu Ihrem Javascript hinzu: (der Ereignisauslöser ".group-result" kann restriktiver sein)

Ich bin mir sicher, dass dies der AbstractChosen-Klasse hinzugefügt werden kann, mit etwas wie 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');
});

Ich habe Bootstrap-Select verwendet und hatte auch Mühe, etwas zu finden, um auf die Optgroup klicken und alle ihre Elemente auswählen zu können - Dieser Link hat tatsächlich für mich funktioniert, hoffe, er hilft: https://stackoverflow.com/questions/41821115 /select-deselect-optgroup-based-on-option-select-in-select-picker-boostrap