Cyber/ravenscott-blog
1
0
Fork 0
forked from snxraven/ravenscott-blog
Code Pull Requests 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"> <div class="container text-center">
<h1><%= process.env.FRONT_PAGE_TITLE %></h1> <h1><%= process.env.FRONT_PAGE_TITLE %></h1>
<p class="lead"><%= process.env.FRONT_PAGE_LEAD %></p> <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"> <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> </div>
</form> </form>
</div> </div>
@ -119,5 +118,22 @@
</footer> </footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> <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> </body>
</html> </html>