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

@@ -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"); }
+         }
+     };
+ });