Automatically submit search form with a timeout

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 : '' %>">
+                    <input type="text" id="search-input" name="search" class="form-control" placeholder="Search blog posts..." value="<%= typeof searchQuery !== 'undefined' ? searchQuery : '' %>">
-                    <!-- <button type="submit" class="btn btn-primary">Search</button> -->
                 </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>