How to use Select2 options and disabled default styling?

Anonymous

#261887

@Trevor I have fixed it works with auto “Enable Auto Count” and without it.

Code:

(() => {
    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;
    };

    const onSelect2Init = () => {
        $('select.sf-input-select').select2({
            templateResult: setIcons,
            minimumResultsForSearch: -1
        });
    };

    $(document).on('sf:init', '.searchandfilter', function () {
        onSelect2Init();
    });

    $(document).on('sf:ajaxfinish', '.searchandfilter', function () {
        onSelect2Init();
    });
})();

Feel free to share this with people who need it.

Regards,
Nino

Anonymous

#261889

See the image example of how I managed to rewrite the CSS from Select2. It is pretty easy. But everyone should know that custom CSS should be loaded after Select2 to make it work.

Results in this:

Trevor

#261898

sf:ajaxformfinish triggers after Auto Count and sf:ajaxfinish triggers after an Ajax submission.

There are examples of usage in the links I gave, and in an earlier reply I gave. You would need to re-apply anything you had already done on page load.

Trevor

#261899

Sorry, I didn’t see the later replies. Thanks for sharing. Is it Ok to close this thread for now?

Anonymous

#261911

@Trevor, yes sure!

[Author]

Posts