Implement file filtering

footer.html

@@ -14,15 +14,43 @@
 			<script src="https://siphalor.de/assets/js/main.js" defer="defer"></script>
 			<script src="/Nginx-Fancyindex-Theme/marked.min.js"></script>
 			<script>
-				var directoryHeading = document.getElementById("directory");
+				let directoryHeading = document.getElementById("directory");
 				document.title = "Directory Listing for " + directoryHeading.innerHTML;
 
+				let table = document.getElementById("list");
+				let searchContainer = document.getElementById("search-container");
+				searchContainer.remove();
+				table.before(searchContainer);
+				searchContainer.hidden = false;
+				let searchInput = document.getElementById("search-input");
+				searchInput.addEventListener("input", filterTable);
+				filterTable();
+
+				function filterTable() {
+					let value = searchInput.value.toLowerCase();
+					let rows = table.tBodies[0].rows;
+					if (value) {
+						for (let row of rows) {
+							row.hidden = row.cells[0].children[0].innerHTML.toLowerCase()
+									.indexOf(value) < 0;
+						}
+					} else {
+						for (let row of rows) {
+							row.hidden = false;
+						}
+					}
+				}
+
 				fetch("README.md").then(response => {
 					if (response.ok) {
 						response.text().then(text => {
-							var article = document.createElement("article");
-							article.innerHTML = marked.parse(text);
-							directoryHeading.after(article);
+							let description = document.createElement("details");
+							description.innerHTML = marked.parse(text);
+							description.open = true;
+							let summary = document.createElement("summary");
+							summary.innerHTML = "Description";
+							description.prepend(summary);
+							directoryHeading.after(description);
 						});
 					}
 				});