| 1 |
import { debounce } from './utils/helpers'; |
| 2 |
|
| 3 |
/** |
| 4 |
* Filters the facets to match the input search term when |
| 5 |
* the number of terms exceeds the threshold determined |
| 6 |
* by the ep_facet_search_threshold filter |
| 7 |
* |
| 8 |
* @param {event} event - keyup |
| 9 |
* @param {Node} facetTerms - terms node |
| 10 |
*/ |
| 11 |
const handleFacetSearch = (event, facetTerms) => { |
| 12 |
const { target } = event; |
| 13 |
const searchTerm = target.value.toLowerCase(); |
| 14 |
const terms = facetTerms.querySelectorAll('.term'); |
| 15 |
|
| 16 |
terms.forEach((term) => { |
| 17 |
const slug = term.getAttribute('data-term-slug'); |
| 18 |
const name = term.getAttribute('data-term-name'); |
| 19 |
|
| 20 |
if (name.includes(searchTerm) || slug.includes(searchTerm)) { |
| 21 |
term.classList.remove('hide'); |
| 22 |
} else { |
| 23 |
term.classList.add('hide'); |
| 24 |
} |
| 25 |
}); |
| 26 |
}; |
| 27 |
|
| 28 |
/** |
| 29 |
* Filter facet choices to match the search field term |
| 30 |
*/ |
| 31 |
const facets = document.querySelectorAll('.widget_ep-facet, .wp-block-elasticpress-facet'); |
| 32 |
|
| 33 |
facets.forEach((facet) => { |
| 34 |
const facetSearchInput = facet.querySelector('.facet-search'); |
| 35 |
|
| 36 |
if (!facetSearchInput) { |
| 37 |
return; |
| 38 |
} |
| 39 |
|
| 40 |
const facetTerms = facet.querySelector('.terms'); |
| 41 |
|
| 42 |
facet.querySelector('.facet-search').addEventListener( |
| 43 |
'keyup', |
| 44 |
debounce((event) => { |
| 45 |
if (event.keyCode === 13) { |
| 46 |
return; |
| 47 |
} |
| 48 |
|
| 49 |
handleFacetSearch(event, facetTerms); |
| 50 |
}, 200), |
| 51 |
); |
| 52 |
}); |
| 53 |
|
