From 3851026939356ec0f25ae26ea6a5f203a19a07c7 Mon Sep 17 00:00:00 2001
From: Ole Eskild Steensen <ole@savvy.no>
Date: Thu, 15 Dec 2022 14:47:22 +0100
Subject: [PATCH] Fix debouncing in searchbox

---
 src/site/_includes/components/searchScript.njk |  9 +++++----
 src/site/styles/digital-garden-base.scss       | 11 +----------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/site/_includes/components/searchScript.njk b/src/site/_includes/components/searchScript.njk
index d75a9d7..367da67 100644
--- a/src/site/_includes/components/searchScript.njk
+++ b/src/site/_includes/components/searchScript.njk
@@ -111,10 +111,11 @@
             }
         });
 
+        const debouncedSearch = debounce(search, 250, false);
         field = document.querySelector('#term');
         field.addEventListener('keydown', (e) => {
             if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') {
-                debounce(search, 500, false)();
+                debouncedSearch();
             }
         });
         resultsDiv = document.querySelector('#search-results');
@@ -144,12 +145,12 @@
             resultsDiv.innerHTML = resultsHTML;
             return;
         }
-        resultsHTML += '<ul>';
+        resultsHTML += '<div>';
         // we need to add title, url from ref
         results.forEach(r => {
-            resultsHTML += `<li class="searchresult"><a class="search-link" href="${r.url}">${r.title}</a><span onclick="window.location='${r.url}'">${r.content}</span></li>`;
+            resultsHTML += `<div class="searchresult"><a class="search-link" href="${r.url}">${r.title}</a><span onclick="window.location='${r.url}'">${r.content}</span></div>`;
         });
-        resultsHTML += '</ul>';
+        resultsHTML += '</div>';
         resultsDiv.innerHTML = resultsHTML;
     }
 </script>
\ No newline at end of file
diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss
index 411a821..44e43b4 100644
--- a/src/site/styles/digital-garden-base.scss
+++ b/src/site/styles/digital-garden-base.scss
@@ -292,11 +292,6 @@ ul.task-list {
     max-height: 50vh;
 }
 
-#search-results ul {
-    padding-inline-start: 0;
-    width: 100%;
-}
-
 #search-results .searchresult {
     margin-bottom: 15px;
     list-style: none;
@@ -306,10 +301,6 @@ ul.task-list {
     font-size: 1.2rem;
     cursor: pointer;
 
-    &:hover {
-        border: 2px solid var(--text-accent);
-    }
-
     &.active{
         border: 2px solid var(--text-accent);
     }
@@ -329,7 +320,7 @@ ul.task-list {
 .search-link {
     display: block;
     margin-bottom: 4px;
-    font-size: 1.2rem;
+    font-size: 1.4rem;
 }
 
 .search-button {