How to add a clear input icon to a Search facetCurrently, Search facets do not have a “Clear” button or icon.

The following code adds an ‘x’ clear button/icon to the search input box of a Search facet. It will automatically reload the (other) facets when clearing the search box, but only if necessary: if a previous search is being cleared.

The code takes the Search facet’s “Auto refresh” setting into account, which makes the result automatically refresh while typing (on keyup, after a slight delay). If this setting is enabled, the clear icon will only appear after the refresh, to prevent users from clearing a running auto-refresh.

Add the following code to your (child) theme’s functions.php. Make sure to replace my_search_facet with the name of your Search facet:

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_action( 'wp_footer', function() {
  ?>
    <script>
      (function($) {
        $(document).on('facetwp-loaded', function() {

          var searchfacet = 'my_search_facet'; // Replace 'my_search_facet' with the name of your Search facet
          var searchbox = $('[data-name="' + searchfacet + '"] .facetwp-search');

          if(! searchbox.next('i').length) {
            searchbox.after('<i class="clear" title="Clear Search"></i>');
          }

          if (searchbox.val() === '') {
            searchbox.next().hide();
          }

          searchbox.on('keyup', function() {
            if('yes' === FWP.settings[searchfacet]['auto_refresh']) {
              $(this).addClass('loading');
            }
            if ($(this).val() !== '') {
              $(this).next().show();
            }
          });
          
          searchbox.removeClass('loading');

          searchbox.next().click(function() {
            // ignore while Search facet is loading
            if (!searchbox.prev().hasClass('f-loading')) {
              $(this).hide();
              searchbox.val('');
              if (FWP.facets[searchfacet].length) {
                FWP.autoload();
              }
            }
          });
        });

      })(jQuery);
    </script>
  <?php
}, 100 );

Also, add the following CSS to your (child) theme’s style.css file. In this example, we are using an ‘x’ image already present in FacetWP, but you could use any other (font) icon.

The CSS also hides the icon when the facet is loading and when an auto-refresh is ongoing:

How to use custom CSS?
CSS code can be placed in your (child) theme's style.css file. Alternatively, you can add it manually between <style> tags in the <head> section, in your (child) theme's header.php file. You can also load it with a hook in your (child) theme's functions.php file, or in the Custom Hooks add-on. To load the code only on pages with facets, use the facetwp_scripts hook. To load it on all pages, use wp_head or wp_footer.  Or you can use a code snippets plugin. More info
.facetwp-type-search i.clear {
    position: absolute;
    right: 30px;
    height: 100%;
    line-height: 1;
    cursor: pointer;
    display: inline-block;
    opacity: 0.3;
    width: 24px;
    height: 100%;
    background: transparent url('/wp-content/plugins/facetwp/assets/images/icon-close.png') 6px 50% no-repeat;
    background-size: 14px 14px;
}

.facetwp-type-search i.clear:hover {
    opacity: 0.8;
}

/* no clear icon  while the Search facet is loading */
/* and when an auto-refresh is running */
.facetwp-type-search .f-loading + input + i.clear,
.facetwp-type-search .loading + i.clear {
    display: none !important;
}

.facetwp-facet input.facetwp-search {
    padding-right: 54px;
}

See also