Dropbown with multi select

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.

Anonymous

#202625

Hi Trevor, I am just jumping in on this thread to say I would also love to see this feature!

Anonymous

#202627

Oh just noticed the manual workaround you posted. Will try it out now.

Anonymous

#202646

Jade can you let me know about your succes?
Haven’t had the time to do it, private reasons, but will try later.

Trevor, is there any news when v3.0 will hit the internet? I would like to have an update proof solution.

Trevor

#202651

No news Rudi. Ross is locked away in a darkened room coding it.

Anonymous

#202653

Haha… that is a good thing… Wish him good luck!

Anonymous

#229463

Hello Trevor,
It is a while ago, how is the progress on this?

Anonymous

#229465

I have been away for a long time, so maybe you already solved it a long time ago 😉

Trevor

#229468

Hi Rudi, it looks like we are going to have to wait till V3. The free version of V3 is done, so we are now tying down the additional features in Pro (many/most are also done), with a target of Spring 2020.

Anonymous

#229605

Ok Trevor! Looking forward to it!
Thanks for the update on the progress!

[Author]

Posts