From 0b3268725139658ecc7aa92ca0932e21782f51dd Mon Sep 17 00:00:00 2001 From: Craig Oates Date: Thu, 27 Oct 2022 23:50:43 +0100 Subject: [PATCH] create filter-search.js file in /static/js directory. This file contains the code for the filtering feature in pages.html and archive.html -- a basic search feature which works by filtering the list of entries on the page. It was originally in main.js but I moved it here because it was producing errors on pages which didn't have the filer stuff on the HTML template. This change allows each template to call it when the template actually uses it. --- static/js/filter-search.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 static/js/filter-search.js diff --git a/static/js/filter-search.js b/static/js/filter-search.js new file mode 100644 index 0000000..514d52a --- /dev/null +++ b/static/js/filter-search.js @@ -0,0 +1,18 @@ + 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"); } + } + }; + });