PhocaFilterScript Vanilla JS

script.js

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

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

		if (tV.length > 0) {
			document.querySelectorAll('#configTabs li, #configContent div.tab-pane').forEach((elem) => {elem.classList.add('active')});
			document.querySelectorAll('.field-spacer, .tab-description').forEach((elem) => {elem.style.display = "none";});

			document.querySelectorAll('.control-group .control-label label').forEach((elem) => {
				let tPP	= elem.parentElement.parentElement;
				let item = elem.getAttribute("data-original-title");
				tPP.style.display = "none";

				if (item && typeof item == "string") {
					let re = new RegExp(phFilterQuote(tV), "i");
					let res = item.match(re);
					
					if (res) {
						tPP.style.display = "block";
					}
				}
			});

			return;
		
		} 
		
		document.querySelectorAll('#configTabs li.active, #configContent div.tab-pane.active').forEach((elem) => {elem.classList.remove('active')});
		
		if(document.querySelector('#configTabs li')) {
			document.querySelector('#configTabs li').classList.add('active');
		}

		if(document.querySelector('#configContent div.tab-pane')) {
			document.querySelector('#configTabs div.tab-pane').classList.add('active');
		}
		
		document.querySelectorAll('.field-spacer, .tab-description, .control-group').forEach((elem) => {elem.style.display = "block";});
	});
});