Improve search results formatting and fetch function (before it was r…

…elative and did not work anywhere other than /. Now it works)

Updated CSS  for the search results in `flexsearch_plugin/README.md` to align to left, and add a background on hover.

Updated example image

v8/flexsearch_plugin/README.md

@@ -192,6 +192,41 @@ add css for the overlay
 
 #search_results {
     margin-top: 20px;
+    width: 100%;
+}
+
+#search_results ul {
+    list-style-type: circle; /* Ensuring list style is visible */
+    padding-left: 20px; /* Adequate space for bullets */
+}
+
+#search_results li {
+    padding: 10px; /* Padding for each list item */
+    border-bottom: 1px solid #ccc; /* Optional: add a separator between items */
+    display: flex;
+    align-items: left; /* Center items vertically */
+}
+
+#search_results li a {
+    text-decoration: none; /* Optional: remove underline from links */
+    color: #333; /* Dark grey color for text */
+    flex-grow: 1; /* Make link fill the li element */
+    margin-left: 10px; /* Space between icon and text */
+    text-align: left;
+}
+
+/* Use this if you want to use a font-awesome icon. This is just an example.
+
+#search_results li::before {
+    content: '\f007'; *//* FontAwesome user icon *//*
+    font-family: 'FontAwesome';
+    color: #5A5A5A; *//* Icon color *//*
+    font-size: 1.2em; *//* Larger icon size *//*
+}
+*/
+
+#search_results li:hover {
+    background-color: lightgray;
 }
 
 button {

v8/flexsearch_plugin/conf.py.sample

@@ -18,10 +18,10 @@ document.addEventListener('DOMContentLoaded', function() {
     var index = {};  // This will store the index data globally within this script block
 
     // Fetch the generated JSON file
-    fetch('search_index.json')
+    fetch('/search_index.json')
     .then(response => response.json())
     .then(data => {
-        index = data;
+        index = data;  // Store the fetched data in the 'index' variable
         for (var key in index) {
             if (index.hasOwnProperty(key)) {
                 searchIndex.add(key, index[key].content);
@@ -38,14 +38,20 @@ document.addEventListener('DOMContentLoaded', function() {
         var results = searchIndex.search(query);
         var resultsContainer = document.getElementById('search_results');
         resultsContainer.innerHTML = ''; // Clear previous results
+
+        var ul = document.createElement('ul'); // Create a UL element to hold the results
+
+        // Display results
         results.forEach(function(result) {
-            var div = document.createElement('div');
+            var li = document.createElement('li'); // Create a LI element for each result
             var link = document.createElement('a');
             link.href = index[result].url;
             link.textContent = index[result].title;
-            div.appendChild(link);
-            resultsContainer.appendChild(div);
+            li.appendChild(link);
+            ul.appendChild(li); // Append the LI to the UL
         });
+
+        resultsContainer.appendChild(ul); // Append the UL to the results container
         document.getElementById('search_overlay').style.display = 'flex'; // Show the overlay
     }
 
@@ -83,7 +89,7 @@ document.addEventListener('DOMContentLoaded', function() {
     var index = {};  // This will store the index data globally within this script block
 
     // Fetch the generated JSON file
-    fetch('search_index.json')
+    fetch('/search_index.json')
     .then(response => response.json())
     .then(data => {
         index = data;  // Store the fetched data in the 'index' variable
@@ -102,15 +108,19 @@ document.addEventListener('DOMContentLoaded', function() {
         var resultsContainer = document.getElementById('search_results');
         resultsContainer.innerHTML = ''; // Clear previous results
 
+        var ul = document.createElement('ul'); // Create a UL element to hold the results
+
         // Display results
         results.forEach(function(result) {
-            var div = document.createElement('div');
+            var li = document.createElement('li'); // Create a LI element for each result
             var link = document.createElement('a');
             link.href = index[result].url;
             link.textContent = index[result].title;
-            div.appendChild(link);
-            resultsContainer.appendChild(div);
+            li.appendChild(link);
+            ul.appendChild(li); // Append the LI to the UL
         });
+
+        resultsContainer.appendChild(ul); // Append the UL to the results container
     }
 
     // Event listener for search button click
@@ -127,4 +137,5 @@ document.addEventListener('DOMContentLoaded', function() {
 </script>
 """
 
+
 BODY_END = BODY_END + FLEXSEARCH_EXTEND