PhocaFilterScript Vanilla JS

script.js

document.addEventListener("DOMContentLoaded", () => { 
  	
	function filterOptionsQuote(str) {
		return str.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&" );
	};

	document.getElementById("filterOptionsInput").addEventListener("input", (event) => {
		
		let eV = event.currentTarget.value;

		if (eV.length > 0) {
			
			/* Make all tabs and tabs content active so the searched parameters can be displayed from all tabs */
			document.querySelectorAll('#configTabs li, .nav-tabs li, #configContent div.tab-pane, #config-document div.tab-pane').forEach((elem) => {elem.classList.add('active')});
			
			/* Hide some specific parts which are not neccessary to display in search results */
			document.querySelectorAll('.field-spacer, .tab-description, fieldset legend').forEach((elem) => {elem.style.display = "none";});
			/* Hide specific component parts like headers */
			document.querySelectorAll('.tab-header').forEach((elem) => {elem.parentElement.parentElement.style.display = "none";});
			
			/*
			 * Hide tab items which cannot be filtered, for example:
			 * #page-permissions - Global Configuration
			 * #permissions - Component Options
			*/
			document.querySelectorAll('#page-filters, #page-permissions, #permissions').forEach((elem) => {elem.style.display = "none";});

			/* Foreach each item and check if it fits criteria. If yes, display it */
			document.querySelectorAll('.control-group .control-label label').forEach((elem) => {
				let ePP	= elem.parentElement.parentElement;
				let item = elem.innerHTML;
				ePP.style.display = "none";
				
				if (item && typeof item == "string") {
					let re = new RegExp(filterOptionsQuote(eV), "i");
					let res = item.match(re);
					
					if (res) {
						ePP.style.display = "block";
					}
				}
			});
			return;
		} else {
		
			/* Remove active class from all tabs when nothing is searched more = input field is empty */
			document.querySelectorAll('#configTabs li.active, .nav-tabs li, #configContent div.tab-pane.active, #config-document div.tab-pane.active').forEach((elem) => {elem.classList.remove('active')});
	
			/* Make first tab in component options active */
			if(document.querySelector('#configTabs li')) {
				document.querySelector('#configTabs li').classList.add('active');
			}
			
			/* Make first tab in global configuration options active */
			if(document.querySelector('.nav-tabs li')) {
				document.querySelector('.nav-tabs li').classList.add('active');
			}

			/* Make first tab CONTENT in global configuration options active */
			if(document.querySelector('#configContent div.tab-pane')) {
				document.querySelector('#configContent div.tab-pane').classList.add('active');
			}
			
			/* Make first tab CONTENT in global configuration options active */
			if(document.querySelector('#config-document div.tab-pane')) {
				document.querySelector('#config-document div.tab-pane').classList.add('active');
			}
			
			/* Display all hidden parts back - undo the changes we've made when searching */
			document.querySelectorAll('.field-spacer, .tab-description, .control-group, fieldset legend').forEach((elem) => {elem.style.display = "block";});
			
			/* Display specific component parts like headers - undo the changes we've made when searching */ 
			document.querySelectorAll('.tab-header').forEach((elem) => {elem.parentElement.parentElement.style.display = "block";});
			
			/* Display items which cannot be filtered - undo the changes we've made when searching */
			document.querySelectorAll('#page-filters, #page-permissions, #permissions').forEach((elem) => {elem.style.display = "block";});
		}
	});
});

document.addEventListener("DOMContentLoaded",function(e){document.getElementById("phFilterOptions").addEventListener("input",function(){var e,t=this.value;t.length>0?(document.querySelectorAll("#configTabs li").forEach(()=>{this.classList.add("active")}),document.querySelectorAll("#configContent div.tab-pane").forEach(()=>{this.classList.add("active")}),document.querySelectorAll(".ph-options-head").forEach(()=>{this.parentElement.parentElement.style.display="none"}),document.querySelectorAll(".ph-options-head-expert").forEach(()=>{this.parentElement.parentElement.style.display="none"}),document.querySelectorAll(".field-spacer").forEach(()=>{this.style.display="none"}),document.querySelectorAll(".tab-description").forEach(()=>{this.style.display="none"}),document.querySelectorAll(".control-group .control-label label").forEach(()=>{var e=this.parentElement.parentElement,l=this.getAttribute("data-original-title");if(e.style.display="none",l&&"string"==typeof l){var o=new RegExp(t.replace(/[-[]{}()*+!<=:?./\^$|#\s,]/g,"\$&"),"i");l.match(o)&&(e.style.display="block")}})):(document.querySelectorAll("#configTabs li").forEach(()=>{this.classList.remove("active")}),(e=document.querySelectorAll("#configTabs li")).length&&e[0].classList.add("active"),document.querySelectorAll("#configContent div.tab-pane").forEach(()=>{this.classList.remove("active")}),(e=document.querySelectorAll("#configContent div.tab-pane")).length&&e[0].classList.add("active"),document.querySelectorAll(".ph-options-head").forEach(()=>{this.parentElement.parentElement.style.display="block"}),document.querySelectorAll(".ph-options-head-expert").forEach(()=>{this.parentElement.parentElement.style.display="block"}),document.querySelectorAll(".field-spacer").forEach(()=>{this.style.display="block"}),document.querySelectorAll(".tab-description").forEach(()=>{this.style.display="block"}),document.querySelectorAll(".control-group").forEach(()=>{this.style.display="block"}))})});