Elementor FAQ with Search Filtering

FAQ with Search Filtering.html

<!-- https://element.how/elementor-faq-with-search-filtering/ -->
<div class="faqContainer">
   <input type="text" class="faqInput" placeholder="enter keyword...">
   <i class="faqReset"></i>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js" integrity="sha512-5CYOlHXGh6QpOFA/TeTylKLWfB3ftPsde7AnmhuitiTX4K5SqCLBeKro6sPS8ilsz1Q4NRx3v8Ko2IBiszzdww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
document.addEventListener('DOMContentLoaded',function(){let settings={toggleOpenOnSearch:true,itemsShownByDefault:10,messages:{noMatchesFound:'No matches found',oneMatchFound:'Showing 1 item',matchesFound:function(){return`Showing ${maxDisplayLimit}of ${matches}items`},allMatchesShown:function(){return`Showing ${sortedList.length}items`},},}
let list=Array.from(document.querySelectorAll('.elementor-toggle .elementor-toggle-item')),filteredList=[],searchTerm,searchTerms,itemText,displayLimit=settings.itemsShownByDefault,loadMoreAmount=settings.itemsShownByDefault,displayList=document.querySelector('.elementor-toggle'),textInput=document.querySelector('.faqInput'),countMessage=document.querySelector('.count-message span'),loadMore=document.querySelector('#load-more'),clearText=document.querySelector('.faqReset'),maxDisplayLimit=settings.itemsShownByDefault,sortedList=[];function resetMaxDisplayLimit(){maxDisplayLimit=displayLimit;}
function onPageLoad(){for(let i=maxDisplayLimit;i<list.length;i++){list[i].style.display='none';}
sortedList=list;generateCountMessage();if(loadMore){loadMore.style.cursor='pointer';generateButtonMessage();}}
onPageLoad();function generateButtonMessage(){if(loadMore){if(sortedList.length<=maxDisplayLimit){loadMore.style.display='none';}else{loadMore.style.removeProperty('display');}}}
function generateCountMessage(){var msg='';matches=sortedList.length;switch(true){case matches===0:msg=settings.messages.noMatchesFound;break;case matches===1:msg=settings.messages.oneMatchFound;break;case matches<=maxDisplayLimit:msg=settings.messages.allMatchesShown();break;default:msg=settings.messages.matchesFound();}
if(countMessage){countMessage.innerHTML=msg;}}
function generateList(){list.forEach(listItem=>listItem.style.display='none');for(let i=0;i<sortedList.length&&i<maxDisplayLimit;i++){if(i<maxDisplayLimit){console.log(i);console.log(sortedList);sortedList[i].style.display='block';displayList.appendChild(sortedList[i]);}else break;}
generateCountMessage();generateButtonMessage();}
function textMatch(element){searchTerm=textInput.value.trim().toLowerCase();itemText=element.textContent.toLowerCase().replace(/\r|\n|\t/g,'');searchTerms=searchTerm.split(' ');let keywordMatch=(function(){let matchesAmount=0;for(let i=0;i<searchTerms.length;i++){if(itemText.indexOf(searchTerms[i])!==-1){matchesAmount++;}}
if(searchTerms.length>1){if(matchesAmount>1){return true;}else{return false;}}else{if(matchesAmount>0){return true;}else{return false;}}})();return keywordMatch;}
function getFilteredItems(){filteredList=list.filter(textMatch);sortedList=filteredList.sort(sortResults);if(textInput.value.trim().length==0){toggleAllClosed();clearText.style.display='none';sortedList=list;}else{clearText.style.display='block';if(settings.toggleOpenOnSearch){toggleAllOpen();}}
generateList();}
let keyWordsEnteredTimer;function getFilteredItemsSearchBox(){clearTimeout(keyWordsEnteredTimer);keyWordsEnteredTimer=setTimeout(function(){resetMaxDisplayLimit();getFilteredItems();performMark();},260);}
textInput.addEventListener('keyup',getFilteredItemsSearchBox);function sortResults(a,b){let aItemText=a.textContent.toLowerCase().replace(/\r|\n|\t/g,'');let bItemText=b.textContent.toLowerCase().replace(/\r|\n|\t/g,'');let aItemCount=0,bItemCount=0;for(let i=0;i<searchTerms.length;i++){let matchExp=new RegExp(searchTerms[i],'g');if(aItemText.match(matchExp)!==null){aItemCount+=aItemText.match(matchExp).length;}
if(bItemText.match(matchExp)!==null){bItemCount+=bItemText.match(matchExp).length;}}
return bItemCount-aItemCount;}
function loadMoreItems(){maxDisplayLimit+=loadMoreAmount;generateList();performMark();}
if(loadMore){loadMore.addEventListener('click',loadMoreItems);}
clearText.addEventListener('click',emptyTextField);function emptyTextField(){textInput.value='';getFilteredItems();performMark();}
function performMark(){let markInstance=new Mark(displayList);let keyword=textInput.value.trim();let options={};markInstance.unmark({done:function(){markInstance.mark(keyword,options);}});}
function toggleAllOpen(){let tabContent=jQuery(displayList).find('.elementor-tab-content');let tabTitle=jQuery(displayList).find('.elementor-tab-title');tabContent.slideDown();tabContent.addClass('elementor-active');tabTitle.addClass('elementor-active');tabTitle.attr('aria-expanded',true);tabTitle.attr('aria-selected',true);tabTitle.attr('tabindex',0);}
function toggleAllClosed(){let tabContent=jQuery(displayList).find('.elementor-tab-content');let tabTitle=jQuery(displayList).find('.elementor-tab-title');tabContent.slideUp();tabContent.removeClass('elementor-active');tabContent.attr("hidden","hidden");tabTitle.removeClass('elementor-active');tabTitle.attr('aria-expanded',false);tabTitle.attr('aria-selected',false);tabTitle.attr('tabindex',-1);}});    
</script>