How to create Search filed for filtering brand in facet.

We can create a search field for filtering brand items from facet.

Template
<input type="search" id="searchfilter" placeholder="Filter options" data-action="search_bar">

Extension

_.extend(FacetsFacetedNavigationItemView.prototype,{
events: _.extend(FacetsFacetedNavigationItemView.prototype.events,{
   'keypress [data-action="search_bar"]':'searchbrand',
   'keydown [data-action="search_bar"]':'searchbrand',
   'keyup [data-action="search_bar"]':'searchbrand',
}),
 searchbrand: function(e) {
   const term = e.target.value.toLocaleLowerCase();
   const brands = document.getElementsByClassName('facets-faceted-navigation-item-facet-option');
   var hasResults = false;
   Array.from(brands).forEach(function(brand) {
	 const title = brand.textContent
	 if (title.toLowerCase().indexOf(term) != -1) {
		brand.parentElement.style.display = 'block';
		hasResults = true;
	 } else {
		brand.parentElement.style.display = 'none';

		}
	});
   }
}),

Leave a comment

Your email address will not be published. Required fields are marked *