Chosen: Restez ouvert sur la sélection multiple

La sélection restera ouverte si vous maintenez CMD ⌘ ou CTRL lors de la sélection des options. Actuellement, il n'y a pas d'option pour conserver l'option de sélection par défaut.

Cela peut-il être mis en œuvre d'une manière ou d'une autre?

Pouvez-vous donner un exemple dans quel cas cela serait utile?

Dans mon application, j'ai un formulaire de recherche dans lequel l'utilisateur peut sélectionner plusieurs groupes d'âge à partir d'un widget à sélection multiple choisi. c'est ennuyeux que le menu soit fermé pendant une fraction de seconde puis se rouvre à nouveau (car le focus déclenche l'événement open).

+1

+1 - Pour la seule raison que nous utilisons Chosen comme mécanisme de filtrage où l'utilisateur final filtrera très probablement par plusieurs éléments par catégorie. L'implémentation actuelle signifie que nous devons inclure une ligne de texte d'assistance expliquant comment garder la boîte ouverte au lieu de simplement pouvoir définir une option et la faire rester ouverte aussi longtemps qu'ils en ont besoin.

Absolument +1 !! Il existe des tonnes de cas d'utilisation où la sélection doit rester ouverte pour pouvoir sélectionner plusieurs options. En fait, je pense que le nombre de cas d'utilisation qui bénéficieraient du fait que la sélection reste ouverte est supérieur à ceux où la sélection devrait se fermer après avoir choisi une seule option. De ce point de vue, il devrait même être un comportement par défaut pour le garder ouvert. Il ne s'appelle pas "select-multiple" pour rien ;-) Mais une option de configuration pour pouvoir le garder ouvert serait assez bonne, et j'espère que cela sera implémenté très bientôt.

Bonjour,

Quelqu'un a-t-il trouvé un moyen de résoudre ce problème?

Lorsque j'essaie ce qui suit, cela ne fonctionne pas non plus, cela ne déclenche pas l'événement open:

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

Monsieur Alexandre

+1 par @geebru et @silkfire

C'est probablement le problème numéro 1 pour les personnes utilisant le contrôle choisi en mode multiple - en particulier lorsqu'il y a plus de 2-3 éléments à sélectionner. J'espère voir cela ajouté. Merci.

+1 pour une telle fonctionnalité. en attendant, j'ai utilisé le "hack" suivant pour le faire fonctionner pour les sélections avec l'attribut multiple :

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

tellement :+1:

Le hack ci-dessus ne fonctionne pas. Il semble que result_select soit undefined .
$("#inputField").chosen().result_select;
Dans v1.1.0 et v1.0.0 .

Désolé, le bon code est :
$("#inputField").chosen().data("chosen").result_select

Merci! Cela fonctionne très bien. Je me retrouve finalement avec ce 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);
};

J'ai une page dynamique qui génère plusieurs zones de sélection en fonction des entrées de l'utilisateur. Le code ci-dessus de Jarnoleconte fonctionne très bien, sauf lorsqu'il y a une sélection vide, ce qui produit un message d'erreur dans la console :

Erreur de type non interceptée : impossible de lire la propriété 'result_select' de monfichier.php non défini

Pour le moment, j'ai inclus ceci dans une instruction if:

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

donc bien qu'il s'agisse d'une bonne solution de contournement pour le moment, je suis également un "+1" pour avoir cela en option, quelque chose dans le sens de selected:stay_open et un bouton "fermer" ajouté à la liste déroulante.

Le code ne fonctionnera évidemment pas s'il n'y a pas de boîte de sélection. Le code que j'ai posté a été simplifié pour le comprendre plus facilement. Chacun devrait se sentir libre de l'intégrer comme bon lui semble dans ses bibliothèques, par exemple faire un wrapper ou quelque chose du genre.

Pour ceux que ça intéresserait, j'ai aussi voulu garder le filtrage/recherche de saisie de texte, j'ai donc rajouté quelques lignes au code ellekz. Semble bien fonctionner sur la version 1.2 choisie. Comme je ne connais pas du tout le code choisi, n'hésitez pas à me dire si quelque chose ne va pas.

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

Cela fonctionne très bien. Merci @ronanquillevere :white_check_mark:

+1

Merci pour le hack, cela fonctionne en effet. J'ai seulement supprimé this.winnow_results(); appeler pour éviter de mettre en surbrillance l'option active la plus proche. Il a maintenant l'air plus... calme :-)

Il serait encore mieux de pouvoir désélectionner les options directement dans la liste. Pour le moment, ils sont simplement grisés et ne peuvent être supprimés qu'avec le bouton X.

+1

+1

+1, c'est tout à fait nécessaire pour la liste déroulante multi-sélection.

Existe-t-il un moyen de faire en sorte que le correctif publié par @ronanquillevere fonctionne lorsqu'il y a plusieurs éléments à sélection multiple sur une seule page?

+1

+1

+1, la principale raison d'avoir une sélection multiple est de pouvoir sélectionner plusieurs options. Choisi devrait prendre en charge cette opération rapide sans avoir à rouvrir le menu de sélection pour chaque option. Cela aiderait particulièrement avec une longue liste où l'utilisateur peut avoir à faire défiler pour trouver les options souhaitées.

Ceci est ouvert depuis 2013, j'ai donc décidé d'utiliser Select2 à la place.

+1

Pour ceux qui utilisent angular-chosen, placez simplement le code de @ronanquillevere dans la fonction initOrUpdate de la directive angular-chosen (vous devrez obtenir le code source au lieu d'utiliser bower/npm).

Voici ce que j'ai fait:

             (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 - il est logique que les multisélections avec une probabilité élevée de choix multiples s'attendent à ce que la boîte ne se ferme pas. CMD/ctrl+clic est une fonctionnalité intéressante, mais ce n'est pas une bonne UX.

+1 - Nous avons récemment remplacé une ancienne sélection multiple par Chosen et l'une des principales plaintes que nous recevons de nos utilisateurs est qu'il faut plus de clics pour sélectionner plusieurs éléments dans la liste car la liste déroulante se ferme à chaque fois. Comme d'autres, nous allons ajouter un hack pour qu'il reste ouvert par défaut pour la multi-sélection. Ce serait vraiment bien si cela faisait partie des options.

+1

+1

+1 c'est une caractéristique essentielle. Quelqu'un est-il prêt à aider avec un PR ?

+1

Salut les gars, une estimation quand il y aura une version appropriée qui le contiendra? ou ai-je raté quelque chose ?

On dirait que cette fonctionnalité indispensable est en master depuis 3 mois maintenant.

Que diriez-vous d'une nouvelle version? :) :)

Bonjour, j'essaie de conserver plusieurs sélections choisies par l'utilisateur après l'actualisation de la page/après le rendu de la page.
Je suis sélectionné 5 districts multiples (articles) et mot-clé principal pour la recherche. Souvent, je souhaite effectuer une recherche avec un mot-clé différent dans les mêmes sélections multiples. Ce n'est pas très convivial si l'utilisateur doit répéter plusieurs sélections. J'utilise Chosen Jq lib. Toute aide serait appréciée. ---Données

@DATTAU , ce serait de la même manière que vous le faites avec des sélections de formulaire régulières.

koenpunt, Pouvez-vous expliquer? S'il te plaît!

Solution de contournement si vous devez le garder ouvert jusqu'au bout.
En chargement, appelez ceci pour la première ouverture
$("#" + selectId).trigger("chosen:open");

Dans choisi.jquery.js il y a la fonction :
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; };

remplacez-le par :
Chosen.prototype.results_hide = function() { return false; };

je l'ai fait comme ça, cherchez cette méthode
Chosen.prototype.result_select
ajouter dans une autre condition

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

Je ne sais pas si c'est un bug ou s'il a été fait comme ça. J'ai 18 éléments en multisélection avec "Ctrl" mais lorsque j'essaie de sélectionner le 15ème élément de la liste, il défile automatiquement jusqu'au premier élément non sélectionné. Y a-t-il un interrupteur pour garder la fenêtre ouverte en dernière position ?

J'ai utilisé le hack de HarrisRobin et cela fonctionne bien avec la première sélection. J'ai utilisé plusieurs boîtes de sélection en utilisant choisi mais ce hack ne fonctionne pas avec la boîte de sélection restante que la première. Est-ce que quelqu'un pourrait m'aider s'il vous plait ?

J'ai testé les extraits de code sur cette page et ils semblent réinitialiser le texte par défaut sur "Sélectionner certaines options", ils ne fonctionnent pas non plus avec plusieurs sélections multiples sur la même page. Ce serait une fonctionnalité intéressante à avoir afin que nous n'ayons pas à demander à nos utilisateurs de maintenir enfoncée une touche de modification.

Bonjour à tous,

Cette fonctionnalité est-elle implémentée maintenant en 2019 ? :)