How to use Select2 options and disabled default styling?

Anonymous

#261740

Hi,

I am using the Select2 option. I like it, but I would like to disable the Select2 styling and use the JS options from the websites. But It is not working. I don’t get any errors.

For instance:

$('.sf-input-select').select2({
    theme: "classic",
    templateResult: formatState,
    minimumResultsForSearch: Infinity
});

Will not fire or do anything.

Is this possible and please tell me how to override and do this.

Trevor

#261775

If Select2 is correctly being applied to the select fields, can you inspect that to see what CSS IS being applied, and from where?

My suspicion is that it may be our CSS file, which by default has the Select2 CSS for our plugin already included. You might need to dequeue our CSS file and make your own CSS file to load that excludes the Select2 (and Chosen I would suggest) classes.

This thread discusses the dequeuing:

https://support.searchandfilter.com/forums/topic/how-to-manually-add-styles-and-js/

But you would have to enqueue our general JavaScript file as well.

Anonymous

#261794

Hi Trevor,

I have tried to apply options from Select2 to the dropdown filter. For instance trying to disable the default search field. Not giving me any errors but neither is it removing the search input form.

So, basically i want to be able to add additional options to the existing dropdown menu to customize the dropdown with the JS options which are available on the official site.

After adding the latest version of Select2 JS and CSS to the functions.php by enqueue it will create a new dropdown and apply the options to it.

This is not what i want. I want to to override and extend the options from the current dropdown.

also tried to dequeue the default style but the CSS is not being removed. What is the correct code for it?

Could you tell me how i can use the options from Select2?

Thanks in advance.

Kind regards,
Nino

Anonymous

#261855

Still waiting for a reply. @Trevor

Trevor

#261858

If you are applying the Select2 yourself, you would need to apply options yourself. Once Slect2 has been applied, you cannot go back and change. You have to remove it and start again. Whilst this is not within the scope of our support, I will try to help where I can, but it may not always be possible.

For example, this will apply Select2 without the search box:

<script>
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('select.sf-input-select').select2({minimumResultsForSearch: -1});
  });
}(jQuery));
jQuery(document).ready(function($){
  $('select.sf-input-select').select2({minimumResultsForSearch: -1});
});
</script>

This post shows the current CSS applies to Select2, and how to override it (in general):

https://support.searchandfilter.com/forums/topic/customise-dropdown-combobox/#post-180345

Anonymous

#261859

@Trevor I have figured something it out. One question how can I add a unique CLASS to each option? If I can do this I have solved all my issues.

Trevor

#261868

We do have this filter, but I am not sure if it will do as you want:

https://searchandfilter.com/documentation/action-filter-reference/#filter-input-object

It might not affect what Select2 does, and might apply to the wrong object.

Anonymous

#261871

@Trevir fixed it with Javascript:

Maybe handy to add to the documentation? You can apply class or image icon before the SELECT input option.

(() => {
    const setIcons = (state) => {
        if (!state.id) {
            return state.text;
        }

        const taxononyName = state.element.value.toLowerCase();
        const taxonomyText = state.text;

        const item = <code><span><i class=&quot;tax-icon tax-icon--${taxononyName}&quot;></i> ${taxonomyText}</span></code>;

        let options = $(item);
        return options;
    };

    jQuery(document).ready(function ($) {
        $('select.sf-input-select').select2({
            templateResult: setIcons,
            minimumResultsForSearch: -1
        });
    });
})();

Cheers.

Trevor

#261880

Thanks for sharing. Make sure it doesn’t break when you do an Ajax submit of the form, or if you have Auto Count on?

Anonymous

#261883

@Trevor it does breaks with Auto Count On. Which JS event to use from SF? If I can fix this multiple people can use this.

[Author]

Posts