Multi-Select (input type) – Allow clicking multiple options without holding CTRL

Anonymous

#233265

Hi,

I’m trying to set up a multi-select dropdown. My client would like to be able to open the dropdown and select multiple options, which would trigger a change in the filter results, but without holding down the CTRL key.

I’m guessing I would need to override the default on click behavior and trigger a new AJAX query, but I’m not totally sure how to do that. Does anyone have any tips on this?

Many thanks,

Trevor

#233270

Did you set the dropdown box to combobox and in the plugin options set the combobox script to Select2?

I am not sure if that would work.

Anonymous

#233282

Ah, I think I can make this work, thank you!

Anonymous

#233284

Is there a way to not have the search input field on the combobox and it would just be a drop down that you can select multiple items? If not, I think I can use JS to achieve the look I want, but just thought I’d ask in case I missed a setting somewhere.

Thanks again.

Trevor

#233294

I *think* the code in this post may work:

https://support.searchandfilter.com/forums/topic/drop-down-menu-not-working-in-safari/page/3/#post-222875

Anonymous

#233444

Hmm, that didn’t work but thank you for trying. I was able to force the search input to display: none in CSS. I’m now going to attempt to set up the dropdown so it stays open on click. I think I’ve got enough to keep going for now. Thank you Trevor!!

Anonymous

#233448

Well, I tried both the Select2 and Chosen Comboboxes but they didn’t work out. In both cases, the dropdown closes every time you select from the dropdown. My client wants to leave the dropdown open and be able to select and deselect items.

So I’m back to square one. Is there way to trigger a click or on change event on an <option> which would activate the filter? I’ve tried this and it doesn’t seem to do anything.

Any help on this would be greatly appreciated!!

Erin

Trevor

#233530

The (universal) additional code to keep the box open is this:

$("#select").select2({
  closeOnSelect: false;
});

You may need to modify this along these lines (as per the previous post I referred you to):

$('select.sf-input-select').select2({closeOnSelect: false});

The box will still close once it loses the focus. You must also switch OFF our form Auto Submit option, and instead use a Submit button.

[Author]

Posts