- Help Center Home
- Getting started
- Introducing FacetWP
- Installation and updates
- FAQ
- How it works
- What are facets?
- Facet types
- Indexing
- Listing templates
- Extras & integrations
- Add-on features and extras
- Using FacetWP with …
- Built-in integrations
- Advanced Custom Fields
- WooCommerce
- SearchWP
- WP-CLI
- Add-on integrations
- Bricks
- Elementor
- Beaver Builder
- WP Recipe Maker and Tasty Recipes
- Relevanssi
- WPML and Polylang
- Pods
- Meta Box
- Flatsome (theme)
- External integrations
- Listify (theme)
- Listable (theme)
- WPGraphQL
- Document Library Pro
- Tips & tricks
- WooCommerce plugins
- WordPress multi-site
- WP All Import
- WebToffee Import Export
- WP Job Manager
- Easy Digital Downloads
- EDD Reviews
- Intuitive Custom Post Order
- Custom Taxonomy Order
- Post Types Order
- Genesis framework
- WP External Links
- ElasticPress
- Caching & hosting
- WP Rocket
- Cloudflare
- New Relic
- WP Engine
- Fast Velocity Minify
- Incompatibilities
- Incompatible plugins
- Troubleshooting
- Troubleshooting guide
- Using the right query
- Common issues
- Get support
- Developers
- Hooks reference
- JavaScript reference
- Shortcodes reference
- FacetWP REST API
- How FacetWP works
- The FacetWP URL
- FacetWP speed and limits
- Tutorials
- Code snippets
- Changelog
How to add a “Clear” button to a Search facet
Currently, 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:
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:
.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;
}