Use Chosen.js with FacetWP dropdowns or sort / pager facets

<?php

// Add this to your (child) theme's functions.php or use the Custom Hooks add-on

// Download: https://github.com/harvesthq/chosen
// All options: https://harvesthq.github.io/chosen/options.html

// Download and include the chosen.js library, make sure these files are enqueued:
// chosen.jquery.min.js
// chosen.min.css

// Chosen.js expects these in the same directory as the library files
// chosen-sprite.png
// chosen-sprite@2x.png

add_action( 'wp_head', function() { ?>

    <script type="text/javascript" src="/path-to/chosen.jquery.min.js"></script>
    <link rel="stylesheet" href="/path-to/chosen.min.css" type="text/css" media="all"/>
    <script>
      (function($) {
        $(document).on('facetwp-loaded', function() {

          // FacetWP dropdowns -> Chosen.js dropdowns
          $('.facetwp-dropdown option:first-child').text('');
          $('.facetwp-dropdown').attr('data-placeholder', 'All');
          //$('.facetwp-dropdown').attr('multiple', ''); // This makes chosen.js render a multiple select instead of a single select. However this currently does NOT work with FacetWP.
          $('.facetwp-dropdown').chosen({
            disable_search_threshold: 5, // Hide the search input on single selects if there are n or fewer options.
            allow_single_deselect: true  // When set to true on a single select, Chosen adds a UI element which selects the first element (if it is blank).
          }); // For more options see: https://harvesthq.github.io/chosen/options.html

          // FacetWP Pager -> Per page facet dropdown -> Chosen.js dropdowns
          $('.facetwp-per-page-select option:first-child').text('');
          $('.facetwp-per-page-select').attr('data-placeholder', 'Per page');
          $('.facetwp-per-page-select').chosen({
            disable_search_threshold: 5,
            allow_single_deselect: true
          });

          // FacetWP Sort facet dropdown -> Chosen.js dropdowns
          $('.facetwp-type-sort option:first-child').text('');
          $('.facetwp-type-sort select').attr('data-placeholder', 'Sort by');
          $('.facetwp-type-sort select').chosen({
            disable_search_threshold: 5,
            allow_single_deselect: true
          });

          // FacetWP OLD Sort (with: [facetwp sort="true"]) -> Chosen.js dropdowns
          $('.facetwp-sort-select option:first-child').text('');
          $('.facetwp-sort-select').attr('data-placeholder', 'Sort by');
          $('.facetwp-sort-select').chosen({
            disable_search_threshold: 5,
            allow_single_deselect: true
          });
            
          // Optional: hide the dropdowns if only one option is left by interacting with facets,
          // because the above replaces the 'any/all' option for a placeholder text.
          $('.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);
    </script>
<?php } );