From 6db73aac52ffafb5463ee6ed8ea1826526593f17 Mon Sep 17 00:00:00 2001
From: Craig Oates <craig@craigoates.net>
Date: Sat, 15 Oct 2022 16:48:53 +0100
Subject: [PATCH] add filter list code to main.js file.

This code is intended to be used mostly in the 'index' pages (Pages and
Archive). These pages are mostly going to act as a back-up for when the
Meilisearch service goes down or if the user has a poor internet
connection. This filtering behaviour allows the user to filter the entries in
the Index they are viewing (Pages or Archive). There are no images and no
repeated calls back to the server. Each index lists just the text (Titles,
publish info. Etc.) and from there the viewer can filter the results on the
page by entering text into the text box in the Index-base HTML templates.

From Nic's point-of-view, these Index pages will not be included in the
nav. menu but if the Meilisearch service goes down (at this site is still
operational), she can swap out the 'search' page for these (really it's just the
Archive Index) so people can still have some form of search/filtering ability
whilst viewing the website.
---
 static/js/main.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/static/js/main.js b/static/js/main.js
index 6d22f33..ed52553 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -11,3 +11,22 @@ function toggleSiteSideMenu() {
 function closeAlert() {
     document.getElementById("be-alert-container").style.display = "none";
 }
+
+ window.addEventListener("load", () => {
+     // (A) GET HTML ELEMENTS
+     var filter = document.getElementById("fe-search-filter"), // search box
+         list = document.querySelectorAll("#fe-search-filter-list li"); // all list items
+     
+     // (B) ATTACH KEY UP LISTENER TO SEARCH BOX
+     filter.onkeyup = () => {
+         // (B1) GET CURRENT SEARCH TERM
+         let search = filter.value.toLowerCase();
+         
+         // (B2) LOOP THROUGH LIST ITEMS - ONLY SHOW THOSE THAT MATCH SEARCH
+         for (let i of list) {
+             let item = i.innerHTML.toLowerCase();
+             if (item.indexOf(search) == -1) { i.classList.add("hide"); }
+             else { i.classList.remove("hide"); }
+         }
+     };
+ });