Chosen: Stay open on multi select

The select will remain open if you hold CMD ⌘ or CTRL when selecting options. Currently there is no option to keep the select option by default.

Can this be implemented somehow?

Can you give an example in what case this would be useful?

In my application I have a search form where the user can select multiple age groups from a Chosen multi-select widget. it's annoying that the menu is closed for a split second then reopens again (because focus triggers the open event).

+1

+1 - For the sole reason of we're using Chosen as a filtering mechanism where the end-user will most likely filter by multiple-items per category. The current implementation means we have to include a helper line of text explaining how to keep the box open instead of just being able to set an option and have it stay open as long as they need.

Absolutely +1 !! There are tons of use-cases where the select should stay open to be able to select multiple options. In fact, I think the number of use-cases that would benefit from the select staying open outnumber the ones where the select should close after choosing just one option. From that point of view it should even be default behavior to keep it open. It's not named "select-multiple" for nothing ;-) But a configuration option to be able to keep it open would be good enough, and I hope that will be implemented really soon.

Hello,

Has anyone figured a way to resolve this?

When I try the following it does not work either, it does not trigger the open event:

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

Mr Alexander

+1 per @geebru and @silkfire

This is probably the #1 pain point for people using the chosen control in multiple mode - especially when there are more than 2-3 items that have to be selected. Hope to see this added. Thanks.

+1 for such a feature. in the meantime i used the following 'hack' to make it work for selects with the multiple attribute:

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 much :+1:

The above hack don't work. It seems like result_select is undefined.
$("#inputField").chosen().result_select;
In both v1.1.0 and v1.0.0.

Sorry, the correct code is:
$("#inputField").chosen().data("chosen").result_select

Thank you! This works great. I finally end up with this 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);
};

I have a dynamic page which generates multiple select boxes based on user input. The above code from Jarnoleconte works great, except for when there is an empty selection, which produces an error message in the console:

Uncaught TypeError: Cannot read property 'result_select' of undefined myfile.php

For the time being I've enclosed this in an if statement:

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

so whilst this is a good workaround for the time being, I'm also a "+1" for having this as an option, something along the lines of chosen:stay_open, and a 'close' button being added to the dropdown.

The code is obviously not gonna work if there's no select box. The code I posted was simplified to understand it more easily. Everyone should feel free to integrate it however they want in their libraries, e.g. make a wrapper or something.

For those who could be interested, I also wanted to keep the filtering / search text input, so I added some lines to ellekz code. Seems to work well on chosen 1.2. As I do not know chosen code at all, please do not hesitate to tell me if something is wrong.

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

That works really fine. Thanks @ronanquillevere :white_check_mark:

+1

Thanx for the hack, it works indeed. I only removed this.winnow_results(); call to avoid highlighting the closest active option. It now looks more... calm :-)

It would be even better to be able to deselect options right from the list. Right now they're just greyed and can only be removed with X button.

+1

+1

+1, this is quite necessary for the multi-selection drop-down.

Is there any way to make the fix that @ronanquillevere posted function when there are several multi-select elements on a single page?

+1

+1

+1, the main reason to have a mutli select is to be able to select mutliple options. Chosen should support doing this fast without having to reopen the select menu for every option. This would especially help with long list where the user may have to scroll to find the desired options.

This has been open since 2013, so I just decided to use Select2 instead.

+1

For those using angular-chosen, simply place @ronanquillevere's code in the initOrUpdate function in angular-chosen directive (you will have to get the source code instead of using bower/npm).

Here is what I did:

             (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 - it is only logical that multiselects with high probability of multiple choices would expect the box not to close. CMD/ctrl+click is a nice feature, but that's not good UX.

+1 - We recently replaced an older multi-select with Chosen and one of the main complaints we are getting from our users is that it takes more clicks to select multiple items in the list because the dropdown closes each time. Like others we are going to add a hack so it stays open by default for multi-select. It would be really nice if that was one of the options.

+1

+1

+1 this is a vital feature. anyone willing to help with a PR?

+1

Hi guys, any estimate when there will be a proper release that contains it? or did I miss anything?

Looks like this much needed feature has been in master for 3 months now.

How about a new release? :) :)

Hi, I am trying to keep multiple selections chosen by user after page refresh/ after the page is rendered.
I am selected 5 multiple Districts (items) and main keyword for search. Often I want to search with different keyword within the same multiple selections. It is not very user friendly if user needs to repeat multiple selections. I am using Chosen Jq lib. Any help will be appreciated. ---Datta

@DATTAU that would be in the same way as you do it with regular form selects.

koenpunt, Can you explain? Please!

Workaround if u need to keep it open all the way.
In onload, call this for firstopen
$("#" + selectId).trigger("chosen:open");

In chosen.jquery.js there is function:
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; };

replace it with:
Chosen.prototype.results_hide = function() { return false; };

i did it like this, look for this method
Chosen.prototype.result_select
add in another 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();
    }
  }
  ...
};

I'm not sure if it is a bug or it was made like this. I have 18 items in multiselect with "Ctrl" but when I'm trying to select f.e. 15th element in list, its is scrolling automaticly to the first unselected item. Is there any switch to keep opened window in last possition?

I have used the hack of HarrisRobin and it is working fine with the first select. I have used multiple number of select box using chosen but this hack is not working with the rest select box than the first one. Would anyone please help me ?

I've tested the code snippets on this page and they seem to reset the default text to "Select Some Options", they also do not work with multiple multiple-selects on the same page. This would be a nice feature to have so we don't have to instruct our users to hold-down a modifier key.

Hello All,

Is this feature implemented now in 2019? :)