snxraven/ravenscott-blog
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Automatically submit search form with a timeout

Browse Source
This commit is contained in:
Raven Scott 2024-09-26 17:46:21 -04:00
parent d082b3b8b0
commit 9ea5880292
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
views/index.ejs
View File

@ -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>