How to add a “Clear” button to a Search or Autocomplete facet

Currently, Search facets and Autocomplete facets do not have a “Clear” button or icon.

For both facet types, you can easily add one with a bit of custom code.

Add a “Clear” button to a Search facet

The following code adds an ‘x’ clear button/icon to the search input box of a Search facet, as you can try out in the working facet on the right.

Clicking the clear icon will automatically reload the facets on the page 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 in line 8 with the name of your Search facet.

The second part of the code adds a bit of CSS to style the clear button. In this example, we are using an ‘x’ image that is already available in FacetWP (in line 62), but you can use any other (font) icon.

In lines 72-75, the CSS hides the clear icon when the facet is loading and when an auto-refresh is ongoing.

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( 'facetwp_scripts', function() {
  ?>
  <script>
    (function() {
      document.addEventListener('facetwp-loaded', function() {

        const facet_name = 'my_search_facet'; // Replace 'my_search_facet' with the name of your Search facet
        const searchbox = document.querySelector(`[data-name="${facet_name}"] .facetwp-search`);

        if (!searchbox.nextElementSibling?.matches('i')) {
          const clearIcon = document.createElement('i');
          clearIcon.className = 'clear';
          clearIcon.title = 'Clear Search';
          searchbox.after(clearIcon);
        }

        if (searchbox.value === '') {
          searchbox.nextElementSibling.style.display = 'none';
        }

        searchbox.addEventListener('keyup', function() {
          if (FWP.settings[facet_name]['auto_refresh'] === 'yes') {
            this.classList.add('loading');
          }
          if (this.value !== '') {
            this.nextElementSibling.style.display = '';
          }
        });

        searchbox.classList.remove('loading');

        searchbox.nextElementSibling.addEventListener('click', function() {
          // ignore while Search facet is loading
          if (!searchbox.previousElementSibling.classList.contains('f-loading')) {
            this.style.display = 'none';
            searchbox.value = '';
            if (FWP.facets[facet_name].length) {
              FWP.autoload();
            }
          }
        });
      });
    })();
  </script>
  <?php
}, 100 );

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

    .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') 50% 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: 56px !important;
      display: inline-block !important;
    }

  </style>
  <?php
}, 100 );

Add a “Clear” button to an Autocomplete facet

The following code adds an ‘x’ clear button/icon to the search input box of an Autocomplete facet.

Clicking the clear icon will automatically reload the facets on the page when clearing the Autocomplete search box.

Add the following code to your (child) theme’s functions.php. Make sure to replace my_autocomplete_facet in line 17 with the name of your Autocomplete facet.

The first part of the code adds a <span> with class .facetwp-input-wrap around the <input> element of the facet, which is needed to absolutely position the <i> element that is the “Clear” button.

The third part of the code adds a bit of CSS to style the clear button. In this example, we are using an ‘x’ image that is already available in FacetWP (in line 63), but you can use any other (font) icon.

In lines 72-74, the CSS hides the clear icon when an auto-refresh is ongoing.

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 an extra span around the input field, to be able to position the clear icon
add_filter( 'facetwp_facet_html', function( $output, $params ) {
  if ( 'autocomplete' == $params['facet']['type'] ) {
    $pattern = '/(<input[^>]*>)/i'; // Find the first <input> tag
    $replacement = '<span class="facetwp-input-wrap">$1</span>';
    $output = preg_replace( $pattern, $replacement, $output, 1 );
  }
  return $output;
}, 10, 2 );

add_action( 'facetwp_scripts', function() {
  ?>
  <script>
    (function() {
      document.addEventListener('facetwp-loaded', function() {

        const facet_name = 'my_autocomplete-facet'; // Replace 'my_autocomplete_facet' with the name of your Autocomplete facet
        const searchbox = document.querySelector(`[data-name="${facet_name}"] .facetwp-autocomplete`);

        if (!searchbox.nextElementSibling?.matches('i')) {
          const clearIcon = document.createElement('i');
          clearIcon.className = 'clear';
          clearIcon.title = 'Clear Search';
          searchbox.after(clearIcon);
        }

        if (searchbox.value === '') {
          searchbox.nextElementSibling.style.display = 'none';
        }

        searchbox.addEventListener('keyup', function() {
          if (this.value !== '') {
            this.nextElementSibling.style.display = '';
          }
        });

        searchbox.nextElementSibling.addEventListener('click', function() {
          this.style.display = 'none';
          searchbox.value = '';
          FWP.autoload();
        });

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

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

    .facetwp-type-autocomplete i.clear {
      position: absolute;
      right: 10px;
      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') 50% 50% no-repeat;
      background-size: 14px 14px;
    }

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

    /* no clear icon  while the Autocomplete facet is loading */
    .facetwp-type-autocomplete.is-loading i.clear {
      display: none !important;
    }

    .facetwp-facet input.facetwp-autocomplete {
      padding-right: 36px;
      display: inline-block !important;
    }

  </style>
  <?php
}, 100 );

See also

• The Search facet type
• The Autocomplete facet type
• Using FacetWP with SearchWP
• Using FacetWP with Relevanssi
• Add search suggestions below a Search facet
• Redirect a search box to a FacetWP results page