distribusi-verse/verse/static/js/dropdown.js

filterSelection("all", "None");
function filterSelection(c, name, id) {
	resetDropDownButtons();
	var i;
  var button = document.getElementById(id);
	if(button){
		button.innerText = name;
		addClass(button, "activebtn");
	}
  var alldistribusis = document.getElementsByClassName("filter");
	if (c == "all") {
    for (i = 0; i < alldistribusis.length; i++) {
      addClass(alldistribusis[i], "show");
    }
  }
  else {
    for (i = 0; i < alldistribusis.length; i++) {
      removeClass(alldistribusis[i], "show");
      if (alldistribusis[i].className.indexOf(c) > -1) {
        addClass(alldistribusis[i], "show");
      }
    }
  }
}

function resetDropDownButtons(){
	document.getElementById("Year").innerText = "Year";
	document.getElementById("Category").innerText = "Category";
	allactivebuttons = document.getElementsByClassName("activebtn");
	for(var i = 0;allactivebuttons.length; i++) {
		removeClass(allactivebuttons[i], "activebtn");
	}
}
function addClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function removeClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}


let searchInput = document.getElementById('tagsearch');
let timeout = null;
// Listen for keystroke events
searchInput.addEventListener('keyup', function (e) {
    // Clear the timeout if it has already been set.
    clearTimeout(timeout);
    // Make a new timeout set to go off in 1000ms (1 second)
    timeout = setTimeout(function () {
        console.log('Input Value:', searchInput.value);
				if (searchInput.value.length > 2) {
					searchTags(searchInput.value);
				} else {
					clearSearchTags();
				}
    }, 1000);
});

function searchTags(searchInput) {
	let tag_ele = document.getElementsByClassName('tags');
	for (var i = 0; i < tag_ele.length; ++i) {
		  let searchText = searchInput.toLowerCase().trim();
			let tagtext = tag_ele[i].innerText.toLowerCase();
			if(searchText.includes(tagtext) || tagtext.includes(searchText)) {
				addClass(tag_ele[i], "searched");
			}
			else {
				removeClass(tag_ele[i], "searched");
			}
	}
}

function clearSearchTags() {
	let tag_ele = document.getElementsByClassName('tags');
	for (var i = 0; i < tag_ele.length; ++i) {
		removeClass(tag_ele[i], "searched");
	}
}