Chosen: Bleiben Sie bei Mehrfachauswahl geöffnet

Die Auswahl bleibt geöffnet, wenn Sie beim Auswählen von Optionen CMD ⌘ oder STRG gedrückt halten. Derzeit gibt es keine Option, um die Auswahloption standardmäßig beizubehalten.

Kann man das irgendwie umsetzen?

Können Sie ein Beispiel geben, in welchem ​​Fall dies nützlich wäre?

In meiner Anwendung habe ich ein Suchformular, in dem der Benutzer mehrere Altersgruppen aus einem Chosen-Multi-Select-Widget auswählen kann. Es ist ärgerlich, dass das Menü für den Bruchteil einer Sekunde geschlossen wird und dann wieder geöffnet wird (weil der Fokus das Open-Ereignis auslöst).

+1

+1 - Aus dem einzigen Grund, dass wir Chosen als Filtermechanismus verwenden, bei dem der Endbenutzer höchstwahrscheinlich nach mehreren Elementen pro Kategorie filtert. Die aktuelle Implementierung bedeutet, dass wir eine Hilfstextzeile einfügen müssen , die erklärt, wie das Feld geöffnet bleibt, anstatt nur eine Option festzulegen und es so lange geöffnet zu lassen, wie es erforderlich ist.

Absolut +1 !! Es gibt unzählige Anwendungsfälle, in denen die Auswahl geöffnet bleiben sollte, um mehrere Optionen auswählen zu können. Tatsächlich denke ich, dass die Anzahl der Anwendungsfälle, die davon profitieren würden, dass die Auswahl offen bleibt, die Anzahl übersteigt, bei der die Auswahl geschlossen werden sollte, nachdem nur eine Option ausgewählt wurde. Aus dieser Sicht sollte es sogar das Standardverhalten sein, es offen zu halten. Es heißt nicht umsonst "select-multiple" ;-) Aber eine Konfigurationsoption, um es offen halten zu können, wäre gut genug, und ich hoffe, das wird wirklich bald implementiert.

Hallo,

Hat jemand einen Weg gefunden, dies zu lösen?

Wenn ich Folgendes versuche, funktioniert es auch nicht, es löst das offene Ereignis nicht aus:

jQuery("select.select-chosen").on('change', function(evt, params) {
    jQuery(this).trigger('chosen:open');
});

Herr Alexander

+1 pro @geebru und @silkfire

Dies ist wahrscheinlich der Schmerzpunkt Nr. 1 für Benutzer, die das ausgewählte Steuerelement im Mehrfachmodus verwenden - insbesondere wenn mehr als 2-3 Elemente ausgewählt werden müssen. Ich hoffe, dass dies hinzugefügt wird. Danke.

+1 für eine solche Funktion. In der Zwischenzeit habe ich den folgenden 'Hack' verwendet, damit es für Selects mit dem Multiple-Attribut funktioniert:

var chosen = $("#MySelect").chosen().data("chosen");
var autoClose = false;

//...

var chosen_resultSelect_fn = chosen.result_select;
chosen.result_select = function(evt) {
    var resultHighlight = null;

    if(autoClose == false)
    {
        evt["metaKey"] = true;
        evt["ctrlKey"] = true;

        resultHighlight = chosen.result_highlight;
    }

    var result = chosen_resultSelect_fn.call(chosen, evt);

    if(autoClose == false && resultHighlight != null)
        resultHighlight.addClass("result-selected");

    return result;
};

+1

+1

+1

+1

so viel :+1:

Der obige Hack funktioniert nicht. Anscheinend ist result_select undefined .
$("#inputField").chosen().result_select;
Sowohl in v1.1.0 als auch in v1.0.0 .

Entschuldigung, der richtige Code lautet:
$("#inputField").chosen().data("chosen").result_select

Danke schön! Das funktioniert super. Ich lande schließlich bei diesem Code:

$chosen = $("#myChosenField").chosen();

var chosen = $chosen.data("chosen");
var _fn = chosen.result_select;
chosen.result_select = function(evt) {    
      evt["metaKey"] = true;
      evt["ctrlKey"] = true;
      chosen.result_highlight.addClass("result-selected");
      return _fn.call(chosen, evt);
};

Ich habe eine dynamische Seite, die mehrere Auswahlfelder basierend auf Benutzereingaben generiert. Der obige Code von Jarnoleconte funktioniert großartig, außer wenn es eine leere Auswahl gibt, die eine Fehlermeldung in der Konsole erzeugt:

Uncaught TypeError: Kann Eigenschaft 'result_select' von undefinierter myfile.php nicht lesen

Vorerst habe ich dies in eine if-Anweisung eingeschlossen:

$chosen = $("#myChosenField").chosen();

if ($("#myChosenField").length) {
  var chosen = $chosen.data("chosen");
  var _fn = chosen.result_select;
  chosen.result_select = function(evt) {    
  evt["metaKey"] = true;
  evt["ctrlKey"] = true;
  chosen.result_highlight.addClass("result-selected");
  return _fn.call(chosen, evt);
  };
}

Während dies also vorerst eine gute Problemumgehung ist, bin ich auch ein "+1", weil ich dies als Option habe, etwas in der Art von selected:stay_open , und eine Schaltfläche "Schließen", die der Dropdown-Liste hinzugefügt wird.

Der Code wird offensichtlich nicht funktionieren, wenn es kein Auswahlfeld gibt. Der von mir gepostete Code wurde vereinfacht, um ihn leichter zu verstehen. Jeder sollte sich frei fühlen, es nach Belieben in seine Bibliotheken zu integrieren, z. B. einen Wrapper oder so etwas zu erstellen.

Für diejenigen, die daran interessiert sein könnten, ich wollte auch die Filter- / Suchtexteingabe beibehalten, also habe ich einige Zeilen zum ellekz-Code hinzugefügt. Scheint auf dem ausgewählten 1.2 gut zu funktionieren. Da ich den gewählten Code überhaupt nicht kenne, zögern Sie bitte nicht, mir zu sagen, wenn etwas nicht stimmt.

var chosen = $(chosenSelectClass).chosen().data('chosen');
var autoClose = false;
var chosen_resultSelect_fn = chosen.result_select;
chosen.search_contains = true;

chosen.result_select = function(evt) 
{
    var resultHighlight = null;

    if(autoClose === false)
    {
        evt['metaKey'] = true;
        evt['ctrlKey'] = true;

        resultHighlight = chosen.result_highlight;
    }

    var stext = chosen.get_search_text();

    var result = chosen_resultSelect_fn.call(chosen, evt);

    if(autoClose === false && resultHighlight !== null)
        resultHighlight.addClass('result-selected');

    this.search_field.val(stext);               
    this.winnow_results();
    this.search_field_scale();

    return result;
 };

Das funktioniert wirklich gut. Danke @ronanquillevere :white_check_mark:

+1

Danke für den Hack, es funktioniert tatsächlich. Ich habe nur this.winnow_results(); entfernt; anrufen, um zu vermeiden, dass die nächste aktive Option hervorgehoben wird. Es sieht jetzt eher... ruhig aus :-)

Noch besser wäre es, Optionen direkt aus der Liste abwählen zu können. Im Moment sind sie nur grau und können nur mit der X-Taste entfernt werden.

+1

+1

+1, dies ist für das Dropdown-Menü mit Mehrfachauswahl durchaus erforderlich.

Gibt es eine Möglichkeit, die von @ronanquillevere gepostete Funktion zu beheben, wenn mehrere Mehrfachauswahlelemente auf einer einzelnen Seite vorhanden sind?

+1

+1

+1, der Hauptgrund für eine Mehrfachauswahl besteht darin, mehrere Optionen auswählen zu können. Ausgewählte sollten dies schnell unterstützen, ohne das Auswahlmenü für jede Option erneut öffnen zu müssen. Dies wäre besonders bei langen Listen hilfreich, bei denen der Benutzer möglicherweise scrollen muss, um die gewünschten Optionen zu finden.

Dies ist seit 2013 offen, also habe ich mich einfach entschieden, stattdessen Select2 zu verwenden.

+1

Für diejenigen, die angle-chosen verwenden, platzieren Sie einfach den Code von @ronanquillevere in der Funktion initOrUpdate in der angle-chosen-Direktive (Sie müssen den Quellcode abrufen, anstatt bower/npm zu verwenden).

Folgendes habe ich getan:

             (function () {
                var autoClose              = false;
                var chosen_resultSelect_fn = chosen.result_select;
                chosen.search_contains     = true;
                chosen.result_select       = function (evt) {
                  var resultHighlight = null;

                  if (autoClose === false) {
                    evt['metaKey'] = true;
                    evt['ctrlKey'] = true;
                    resultHighlight = chosen.result_highlight;
                  }
                  var stext = chosen.get_search_text();
                  var result = chosen_resultSelect_fn.call(chosen, evt);

                  if (autoClose === false && resultHighlight !== null)
                    resultHighlight.addClass('result-selected');

                  this.search_field.val(stext);
                  this.winnow_results();
                  this.search_field_scale();
                  return result;
                };
              })();

+1

+1 - Es ist nur logisch, dass Mehrfachauswahlen mit hoher Wahrscheinlichkeit von Mehrfachauswahlen erwarten würden, dass sich die Box nicht schließt. CMD/Strg+Klick ist ein nettes Feature, aber das ist keine gute UX.

+1 - Wir haben kürzlich eine ältere Mehrfachauswahl durch Chosen ersetzt und eine der Hauptbeschwerden, die wir von unseren Benutzern erhalten, ist, dass mehr Klicks erforderlich sind, um mehrere Elemente in der Liste auszuwählen, da sich das Dropdown-Menü jedes Mal schließt. Wie andere werden wir einen Hack hinzufügen, damit er standardmäßig für die Mehrfachauswahl geöffnet bleibt. Es wäre wirklich schön, wenn das eine der Optionen wäre.

+1

+1

+1 Dies ist eine wichtige Funktion. jemand bereit, mit einer PR zu helfen?

+1

Hallo Leute, gibt es eine Schätzung, wann es eine richtige Version geben wird, die es enthält? oder habe ich was übersehen?

Sieht so aus, als wäre diese dringend benötigte Funktion jetzt seit 3 ​​Monaten im Master.

Wie wäre es mit einer Neuerscheinung? :) :)

Hallo, ich versuche, mehrere vom Benutzer ausgewählte Auswahlen nach der Seitenaktualisierung/nach dem Rendern der Seite beizubehalten.
Ich bin ausgewählt 5 mehrere Bezirke (Elemente) und Hauptschlüsselwort für die Suche. Oft möchte ich mit verschiedenen Schlüsselwörtern innerhalb derselben Mehrfachauswahl suchen. Es ist nicht sehr benutzerfreundlich, wenn der Benutzer mehrere Auswahlen wiederholen muss. Ich verwende Chosen Jq lib. Jede Hilfe wird geschätzt. --- Datta

@DATTAU das wäre genauso wie bei regulären Formularauswahlen.

koenpunt, kannst du das erklären? Bitte!

Problemumgehung, wenn Sie es ganz offen halten müssen.
Rufen Sie dies im Onload für firstopen auf
$("#" + selectId).trigger("chosen:open");

In selected.jquery.js gibt es eine Funktion:
Chosen.prototype.results_hide = function() { if (this.results_showing) { this.result_clear_highlight(); this.container.removeClass("chosen-with-drop"); this.form_field_jq.trigger("chosen:hiding_dropdown", { chosen: this }); } return this.results_showing = false; };

ersetzen Sie es durch:
Chosen.prototype.results_hide = function() { return false; };

Ich habe es so gemacht, suchen Sie nach dieser Methode
Chosen.prototype.result_select
füge eine weitere Bedingung hinzu

Chosen.prototype.result_select = function(evt) {
  ...
  if (!(this.is_multiple && (!this.hide_results_on_select || (evt.metaKey || evt.ctrlKey)))) {
    //stay open temporary solution
    if (this.max_selected_options <= 0 || (this.max_selected_options > 0 && this.max_selected_options <= this.choices_count())) {
      this.results_hide();
      this.show_search_field_default();
    }
  }
  ...
};

Ich bin mir nicht sicher, ob es ein Bug ist oder so gemacht wurde. Ich habe 18 Elemente in der Mehrfachauswahl mit "Strg", aber wenn ich versuche, z. B. das 15. Element in der Liste auszuwählen, scrollt es automatisch zum ersten nicht ausgewählten Element. Gibt es einen Schalter, um das geöffnete Fenster in der letzten Position zu halten?

Ich habe den Hack von HarrisRobin verwendet und es funktioniert gut mit der ersten Auswahl. Ich habe mehrere Auswahlboxen mit Ausgewählt verwendet, aber dieser Hack funktioniert nicht mit den restlichen Auswahlboxen als der ersten. Würde mir bitte jemand helfen?

Ich habe die Codeausschnitte auf dieser Seite getestet und sie scheinen den Standardtext auf "Einige Optionen auswählen" zurückzusetzen, sie funktionieren auch nicht mit mehreren Mehrfachauswahlen auf derselben Seite. Dies wäre eine nette Funktion, damit wir unsere Benutzer nicht anweisen müssen, eine Modifikatortaste gedrückt zu halten.

Hallo alle,

Wird diese Funktion jetzt im Jahr 2019 implementiert? :)