Merge pull request #2068 from 10up/reapply/pr-2004

Reapply/pr 2004: Support multiple Facets
10up · Feb 22, 2021 · 1fe2292 · 1fe2292
2 parents 74d7b0d + e0cf888
commit 1fe2292
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/assets/js/facets.js b/assets/js/facets.js
@@ -1,15 +1,14 @@
 import { debounce } from './utils/helpers';
 
-const facetTerms = document.querySelector('.widget_ep-facet .terms');
-
 /**
  * Filters the facets to match the input search term when
  * the number of terms exceeds the threshold determined
  * by the ep_facet_search_threshold filter
  *
  * @param {event} event - keyup
+ * @param {Node} facetTerms - terms node
  */
-const handleFacetSearch = (event) => {
+const handleFacetSearch = (event, facetTerms) => {
 	const { target } = event;
 	const searchTerm = target.value.replace(/\s/g, '').toLowerCase();
 	const terms = facetTerms.querySelectorAll('.term');
@@ -29,17 +28,24 @@ const handleFacetSearch = (event) => {
 /**
  * Filter facet choices to match the search field term
  */
-const facetSearchInput = document.querySelector('.widget_ep-facet .facet-search');
+const facets = document.querySelectorAll('.widget_ep-facet');
+
+facets.forEach((facet) => {
+	const facetSearchInput = facet.querySelector('.facet-search');
+	const facetTerms = facet.querySelector('.terms');
+
+	if (!facetSearchInput) {
+		return;
+	}
 
-if (facetSearchInput) {
-	facetSearchInput.addEventListener(
+	facet.querySelector('.facet-search').addEventListener(
 		'keyup',
 		debounce((event) => {
 			if (event.keyCode === 13) {
 				return;
 			}
 
-			handleFacetSearch(event);
+			handleFacetSearch(event, facetTerms);
 		}, 200),
 	);
-}
+});