From abe3ad67c60ab47b7c6c5c09a59ab1e53dbe8490 Mon Sep 17 00:00:00 2001
From: Thomas Chartron <thomas.chartron@gmail.com>
Date: Sun, 7 Nov 2021 19:28:26 +0100
Subject: [PATCH] update

---
 static/js/search.js   | 5 +++--
 templates/layout.html | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/static/js/search.js b/static/js/search.js
index 3bf1415..9ba3636 100644
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -57,11 +57,12 @@ document.addEventListener("DOMContentLoaded", function() {
     if ([...document.body.classList].includes('search-active') && search_input.value.trim().length > 3) {
       // console.log('search')
       search_term = search_input.value.trim();
-      console.log(search_term)
+      // console.log(search_term)
       search_results = search_index.search(search_term, elasticlunr_options);
       // console.log(search_results)
       if (Array.isArray(search_results) && search_results.length > 0) {
         let result_list = document.getElementById('results-list');
+        result_list.replaceChildren();
         let item = "";
         for (i = 0; i < search_results.length; i++) {
           let item = formatResultItem(search_results[i]);
@@ -91,7 +92,7 @@ function toggleSearchModal () {
 
 function formatResultItem(search_result) {
   console.log(search_result)
-  let formatted_result = `<li class="flex flex-col gap-y-2 hover:shadow-lg">
+  let formatted_result = `<li class="flex flex-col gap-y-2 hover:bg-white dark:hover:bg-gray-600 text-black dark:text-white">
   <span class="text-xl text-bold">${search_result.doc.title}</span>
   <span class="text-lg">${search_result.doc.description}</span>
   </li>`
diff --git a/templates/layout.html b/templates/layout.html
index d228e8e..ac439f2 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -96,8 +96,8 @@
                 <!-- Modal Body -->
                 <input id="search-input" class="rounded-xl border border-black h-12 text-bold text-2xl pl-2 text-black" type="text">
                 <!-- Search results -->
-                <div id="search-results" class="flex flex-col gap-y-4 border border-black max-h-2xl">
-                  <ul id="results-list"></ul>
+                <div id="search-results">
+                  <ul id="results-list" class="flex flex-col gap-y-4 max-h-2xl mt-2 divide-y"></ul>
                 <!--Footer-->
                 <!-- <div class="flex justify-end pt-2">
                   <button class="px-4 bg-transparent p-3 rounded-lg text-indigo-500 hover:bg-gray-100 hover:text-indigo-400 mr-2">Action</button>