Fixes for dropdowns facets and sortbox with .chosen() in FacetWP 3.8.0 - 3.8.2 because Facetwp fUtil library did not pick up jQuery.trigger change events from chosen() in these FacetWP versions. This was fixed in FacetWP 3.8.3+. Check this page for current versions of FacetWP: https://gist.facetwp.com/gist/use-chosen-js-with-facetwp-dropdowns-or…

facetwp 3.8+ dropdowns with chosen()

(function ($) {

    $(document).on('facetwp-loaded', function () {

        // Facetwp Dropdowns to chosen dropdows
        $('.facetwp-dropdown option:first-child').text('');
        $('.facetwp-dropdown').attr('data-placeholder', 'All');
        $('.facetwp-dropdown').chosen({disable_search_threshold: 50, allow_single_deselect: true});

        // Facetwp Sort box to chosen dropdows
        $('.facetwp-sort-select option:first-child').text('');
        $('.facetwp-sort-select').attr('data-placeholder', 'Sort by');
        $('.facetwp-sort-select').chosen({disable_search_threshold: 50, allow_single_deselect: true});


        // Hack to get chosen dropdowns working with Facetwp 3.8+
        // Needed because fUtil in Facetwp 3.8 is not picking up jQuery.trigger events.
        $(document).on('change', '.facetwp-dropdown', function (e) {

            var $facet = $(this).closest('.facetwp-facet');
            var facet_name = $facet.attr('data-name');

            if ('' !== $(this).val()) {
                FWP.frozen_facets[facet_name] = 'soft';
            }
            FWP.autoload();
            e.stopImmediatePropagation(); //without this, there is an event loop after changing facet selections because change events from facetwp are picked up here
        });

        // Hack to get sort dropdowns working with Facetwp 3.8+ 
        // Needed because fUtil in Facetwp 3.8 is not picking up jQuery.trigger events.
        $(document).on('change', '.facetwp-sort-select', function (e) {

            FWP.extras.sort = $(this).val();
            FWP.soft_refresh = true;
            FWP.autoload();
            e.stopImmediatePropagation(); //maybe not needed with sortbox

        });


        // Optional: hide dropdown facet if only one option left by interacting facet selections
        $('.facetwp-type-dropdown select').each(function () {

            if ($(this).children('option').length == 1) {
                $(this).closest('.facetwp-type-dropdown').hide();
            } else {
                $(this).closest('.facetwp-type-dropdown').show();
            }
        });

    });

})(jQuery);

Hi. Can you explain how make it work?

How to make what work? The above works for me with Chosen.js version 1.8.7 and Facetwp dropdowns and sort boxes. With it, you can add Chosen features to dropdowns and have them working with FacetWP dropdown facets and sort dropdowns (at least the older sort boxes, not sure about the new Facetwp sort facet, have not tried that yet.

Thank you!!!

Note for anyone who uses this: The above is only for specific FacetWP versions:

There are 2 'Hack' parts in the code, to have fUtil pick up jQuery.trigger events. Chosen.js and Select2 use jQuery.trigger, which doesn’t fire native DOM events. fUtil did not pick up those in FacetWP 3.8.0 - 3.8.2.
This was fixed in FacetWP 3.8.3 and upward: if jQuery is present, then it uses its built-in event handling. So for FacetWP v3.8.3+ these 2 parts in the code are not necessary anymore.

For a better and current example, working with the latest FacetWP version, which also shows how to use Chosen.js for FacetWP's Sort facet and Pager facets, see: https://gist.facetwp.com/gist/use-chosen-js-with-facetwp-dropdowns-or-sort-pager-facets/