From 9ea5880292601b45bd3ae2db7500ec409f841b4f Mon Sep 17 00:00:00 2001
From: Raven Scott <raven@ssh.surf>
Date: Thu, 26 Sep 2024 17:46:21 -0400
Subject: [PATCH] Automatically submit search form with a timeout

---
 views/index.ejs | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/views/index.ejs b/views/index.ejs
index 1e975d8..c166212 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -42,10 +42,9 @@
         <div class="container text-center">
             <h1><%= process.env.FRONT_PAGE_TITLE %></h1>
             <p class="lead"><%= process.env.FRONT_PAGE_LEAD %></p>
-                        <form action="/" method="get" class="mb-4">
+            <form action="/" method="get" class="mb-4">
                 <div class="input-group">
-                    <input type="text" name="search" class="form-control" placeholder="Search blog posts...enter to submit..." value="<%= typeof searchQuery !== 'undefined' ? searchQuery : '' %>">
-                    <!-- <button type="submit" class="btn btn-primary">Search</button> -->
+                    <input type="text" id="search-input" name="search" class="form-control" placeholder="Search blog posts..." value="<%= typeof searchQuery !== 'undefined' ? searchQuery : '' %>">
                 </div>
             </form>
         </div>
@@ -119,5 +118,22 @@
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        let typingTimer;                // Timer identifier
+        const doneTypingInterval = 500;  // Time in ms, adjust for desired delay
+
+        const searchInput = document.getElementById('search-input');
+
+        searchInput.addEventListener('input', function() {
+            clearTimeout(typingTimer);
+            typingTimer = setTimeout(function() {
+                searchInput.form.submit();
+            }, doneTypingInterval);
+        });
+
+        searchInput.addEventListener('keydown', function() {
+            clearTimeout(typingTimer);
+        });
+    </script>
 </body>
 </html>