Add catalog search

web/static/index.js

@@ -72,3 +72,21 @@ function resizeCatalogPreviewImgs() {
         }
     }
 }
+
+function applyCatalogSearch() {
+    const searchText = $("catalogSearch").value.toLowerCase();
+
+    const posts = Array.from(document.querySelectorAll(".catalog-preview"));
+    for (const post of posts) {
+        const headerContent = post.querySelector("h1 a").textContent;
+        const bodyContent = post.querySelector("p").textContent;
+
+        const contentToSearch = (headerContent + "\n" + bodyContent).toLowerCase();
+        if (contentToSearch.search(searchText) === -1) {
+            post.style.display = "none";
+        }
+        else {
+            post.style.display = "";
+        }
+    }
+}

web/views/board.templ

@@ -75,12 +75,15 @@ templ Board(board database.Board) {
 				<option selected value="small">Small</option>
 				<option value="large">Large</option>
 			</select>
+			<input oninput="applyCatalogSearch()" id="catalogSearch" style="float: right;" placeholder="Search"/>
 		</div>
 		<hr/>
 		<div
 			hx-get={ fmt.Sprintf("/hx/%s/catalog", board.Slug) }
 			hx-trigger="load, refreshThreads from:body"
-			_="on htmx:afterRequest call resizeCatalogPreviewImgs()"
+			_="on htmx:afterRequest 
+				call resizeCatalogPreviewImgs()
+				then call applyCatalogSearch()"
 		></div>
 	}
 }