Improve blog search functionality

DeclanChidlow · Nov 28, 2023 · 7a25e9e · 7a25e9e
1 parent 276aad6
commit 7a25e9e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 35 deletions.
diff --git a/config/pages/blog/blog.md b/config/pages/blog/blog.md
@@ -54,7 +54,9 @@
     </section>
 </h1>
 
-<input type="search" id="blogsearch" onkeyup="search()" placeholder="Search posts">
+<search>
+    <input type="search" id="blogsearch" onkeyup="search()" placeholder="Search posts">
+</search>
 
 <div id="blogposts">
   <div>
@@ -109,22 +111,16 @@
 
 <script>
 function search() {
-  // Declare variables
-  var input, filter, div, a, i, txtValue;
-  input = document.getElementById('blogsearch');
-  filter = input.value.toUpperCase();
-  ul = document.getElementById("blogposts");
-  div = ul.getElementsByTagName('div');
-
-  // Loop through all divst items, and hide those who don't match the search query
-  for (i = 0; i < div.length; i++) {
-    a = div[i].getElementsByTagName("a")[0];
-    txtValue = a.textContent || a.innerText;
-    if (txtValue.toUpperCase().indexOf(filter) > -1) {
-      div[i].style.display = "";
-    } else {
-      div[i].style.display = "none";
-    }
-  }
+  var input = document.getElementById('blogsearch');
+  var filter = input.value.toUpperCase();
+  var ul = document.getElementById("blogposts");
+  var divs = ul.querySelectorAll('div');
+
+  divs.forEach(function(div) {
+    var a = div.querySelector("a");
+    var txtValue = a.textContent;
+    var displayStyle = (txtValue.toUpperCase().indexOf(filter) > -1) ? "" : "none";
+    div.style.display = displayStyle;
+  });
 }
 </script>
diff --git a/docs/blog.html b/docs/blog.html
@@ -90,7 +90,9 @@ <h1>
     	Blog
     </section>
 </h1>
-<input type="search" id="blogsearch" onkeyup="search()" placeholder="Search posts">
+<search>
+    <input type="search" id="blogsearch" onkeyup="search()" placeholder="Search posts">
+</search>
 <div id="blogposts">
   <div>
 <p>Essay</p>
@@ -135,23 +137,17 @@ <h3><a href="/blog/Welcome">Welcome</a></h3>
 </div> 
 <script>
 function search() {
-  // Declare variables
-  var input, filter, div, a, i, txtValue;
-  input = document.getElementById('blogsearch');
-  filter = input.value.toUpperCase();
-  ul = document.getElementById("blogposts");
-  div = ul.getElementsByTagName('div');
+  var input = document.getElementById('blogsearch');
+  var filter = input.value.toUpperCase();
+  var ul = document.getElementById("blogposts");
+  var divs = ul.querySelectorAll('div');
 
-  // Loop through all divst items, and hide those who don't match the search query
-  for (i = 0; i < div.length; i++) {
-    a = div[i].getElementsByTagName("a")[0];
-    txtValue = a.textContent || a.innerText;
-    if (txtValue.toUpperCase().indexOf(filter) > -1) {
-      div[i].style.display = "";
-    } else {
-      div[i].style.display = "none";
-    }
-  }
+  divs.forEach(function(div) {
+    var a = div.querySelector("a");
+    var txtValue = a.textContent;
+    var displayStyle = (txtValue.toUpperCase().indexOf(filter) > -1) ? "" : "none";
+    div.style.display = displayStyle;
+  });
 }
 </script>