Dropbown with multi select

Anonymous

#199883

Hello Trevor, I cannot open de second page of this topic (also when I open de second page in new window), so I write my reply here.

It seems to work indeed, but will it be possible to have the dropdown stay down until the diverse checkboxes are checked? Now it flips closed after 1 checkbox.

Would be great if the search terms where visible somewhere like next to the reset button.
I tried that yesterday and I can call them in but only with a page refresh after I searched the cats via the multi-select. Apparently Ajax is not refreshing the page so it will not update the terms automatically.

Anonymous

#199885

BTW now I wrote the above reply, I can see the second page here 😉

Trevor

#199890

One step at a time Rudi!

I am not sure the keep open can be done though. I have looked and I can see other users of Select2 ask for it, any solution causes other problems.

Do you mean the search terms chosen in the select box, or of the whole form?

Anonymous

#199892

Haha you are right Trevor, sorry 😉

If the drop down closes, the mobile users will not see that a multi select is possible. So they will use just one term.

For the showing of terms which are selected, I mean those of the whole form. So users can see what they have selected and maybe deselect a search tern when there is a X next to it for example.

Trevor

#199894

Showing of terms is POSSIBLE, but requires custom crafting of PHP to do it. To add the x’s would be too hard right now, but may come with V3.

Anonymous

#200082

Great, did you have any progress on the topic of dropdown and multiselect?

Trevor

#200102

This reply has been marked as private.

Anonymous

#200410

Hello Trevor, super!
I will wait on further news.

Trevor

#200928

Just to update you. Ross and I have discussed this and he is looking into one thing that needs resolving and then I can get back to you with a ‘How to’ guide.

Trevor

#201141

OK. So, for now, this will need to be an manual setup.

You will need this JavaScript file:

https://www.dropbox.com/s/vuu640lyjga094e/select2multi-checkboxes.js?dl=0

I loaded this file in my theme with this code in my child theme functions.php file (I placed the file in a sub-folder of my child theme called js:

function sandf_checkbox_script() {
  wp_register_script( 'select2-with-checkboxes', get_stylesheet_directory_uri() . '/js/select2multi-checkboxes.js', array('jquery'), '1.0.0', true );
  wp_enqueue_script( 'select2-with-checkboxes' );
}
add_action( 'wp_enqueue_scripts', 'sandf_checkbox_script', 99 );

Lines 81 and 89 will need to be edited. Here is what they look like (the lines with sf-field-taxonomy-download_category in):

jQuery(function($) {
  $('.sf-field-taxonomy-download_category .sf-input-select').select2MultiCheckboxes({
    templateSelection: function(selected, total) {
      return selected.length + " selected of " + total;
    }
  })
});
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('.sf-field-taxonomy-download_category .sf-input-select').select2MultiCheckboxes({
      templateSelection: function(selected, total) {
        return selected.length + " selected of " + total;
      }
    });
  });
}(jQuery));

You need to change these names to whatever your field is called.

You will need some Custom CSS (you may need to make it more specific to the field, but this should work as is):

.select2-results__option .wrap:before{
    font-family: 'Font Awesome\ 5 Free';
    color:#999;
    content:"\f0c8";
    width:25px;
    height:25px;
    padding-right: 10px;
}
.select2-results__option[aria-selected=true] .wrap:before{
    content:"\f14a";
}

You will need an icon font. I have used Font Awesome 5 Free. You may already have one loading to your site. The content numbers and font-family name in the code will need to match whichever icon font and icons you use.

I loaded Font Awesome 5 Free with this code in my child theme functions.php file:

function sandf_add_custom_fa_css() {
  wp_enqueue_style( 'custom-fa', 'https://use.fontawesome.com/releases/v5.6.3/css/all.css' );
}
add_action( 'wp_enqueue_scripts', 'sandf_add_custom_fa_css' );

In the form field settings, the field needs to be set to multi-select AND combobox, and in the plugin settings, the Combobox script needs to be set to Select2.

[Author]

Posts