Support Forums

The forums are closed and will be removed when we launch our new site.

Looking for support? You can access the support system via your account.

Forums › Forums › Search & Filter Pro › How to use Select2 options and disabled default styling?

Tagged: 

Viewing 10 posts - 1 through 10 (of 15 total)
1 2
  • Friends For Friends
    (Private)  October 2, 2020 at 3:23 pm #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 Moderator
    (Private)  October 2, 2020 at 5:18 pm #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.

    Friends For Friends
    (Private)  October 2, 2020 at 11:03 pm #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

    Friends For Friends
    (Private)  October 5, 2020 at 1:09 pm #261855

    Still waiting for a reply. @Trevor

    Trevor Moderator
    (Private)  October 5, 2020 at 1:23 pm #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

    Friends For Friends
    (Private)  October 5, 2020 at 1:30 pm #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 Moderator
    (Private)  October 5, 2020 at 1:53 pm #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.

    Friends For Friends
    (Private)  October 5, 2020 at 2:02 pm #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 Moderator
    (Private)  October 5, 2020 at 2:20 pm #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?

    Friends For Friends
    (Private)  October 5, 2020 at 2:33 pm #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
Viewing 10 posts - 1 through 10 (of 15 total)
1 2

The topic ‘How to use Select2 options and disabled default styling?’ is closed to new replies.