Search bar refinements

- make search bar instructions lighter for better visibility
- remove the 3-char minimum warning if search bar is cleared.

src/readtheorg_theme/css/search.css

@@ -1,25 +1,28 @@
-/* -*- mode: css; -*- */
+/* -*- mode: css -*- */
 
 /* read-the-org search styles, v1.6 */
 
 #search-container {
   padding: 10px;
   background-color: #343131;
 }
+
 #search-input {
   width: 100%;
   padding: 5px;
   border: 1px solid #ccc;
   border-radius: 4px;
   font-size: 14px;
 }
+
 #search-results {
   list-style-type: none;
   padding: 0;
   margin: 10px 0 0 0;
   max-height: 300px;
   overflow-y: auto;
 }
+
 #search-results li {
   background-color: #2980B9;
   color: white;
@@ -29,9 +32,15 @@
   cursor: pointer;
   font-size: 14px;
 }
+
 #search-results li:hover {
   background-color: #3091d1;
 }
+
+#search-description {
+  color: #b3b3b3; /* Lighter color, matching the TOC text color in readtheorg.css */
+}
+
 mark {
   background-color: yellow;
   color: black;

src/readtheorg_theme/js/search.js

@@ -1,8 +1,11 @@
-// readh-the-org-search v1.5
-console.log('custom-search.js v1.6 is being loaded');
+// -*- mode: js2 -*-
+
+// readh-the-org-search v1.8
+
+console.log('custom-search.js v1.8 is being loaded');
 
 $(document).ready(function() {
-  console.log('Document ready, initializing search functionality v1.5');
+  console.log('Document ready, initializing search functionality v1.8');
 
   $('#table-of-contents').prepend(`
     <div id="search-container">
@@ -15,6 +18,7 @@ $(document).ready(function() {
 
   const searchInput = $('#search-input');
   const searchResults = $('#search-results');
+  const searchDescription = $('#search-description');
   const content = $('#content');
   let searchIndex = [];
 
@@ -57,8 +61,17 @@ $(document).ready(function() {
     const searchTerm = searchInput.val().toLowerCase();
     searchResults.empty();
 
+    if (searchTerm.length === 0) {
+      searchDescription.show();
+      searchResults.hide();
+      return;
+    }
+
+    searchDescription.hide();
+    searchResults.show();
+
     if (searchTerm.length < 3) {
-      searchResults.append('<li>Please enter at least 3 characters</li>');
+      searchResults.html('<li>Please enter at least 3 characters</li>');
       return;
     }
 
@@ -131,5 +144,5 @@ $(document).ready(function() {
     e.preventDefault();
   });
 
-  console.log('Search functionality v1.6 initialization complete');
+  console.log('Search functionality v1.8 initialization complete');
 });