From 22f85a3005ff1d4280cb9209351395694a01e4cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Petr=20H=C3=A1la?= <halapetr@selfnet.cz>
Date: Sun, 28 Jan 2024 18:10:31 +0100
Subject: [PATCH] Add debounce to search

Should reduce number of search calls
---
 backend/templates/songs/index.html | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/backend/templates/songs/index.html b/backend/templates/songs/index.html
index fa50c34..99d35f1 100644
--- a/backend/templates/songs/index.html
+++ b/backend/templates/songs/index.html
@@ -120,6 +120,17 @@ <h6 class="d-inline" ><%:author%></h6>
     import {Options, BooleanOption} from "{% static 'js/Options.js' %}"
     const canWakeLock = () => 'wakeLock' in navigator;
 
+    function debounce(callback, delay = 1000) {
+      var time;
+
+      return (...args) => {
+        clearTimeout(time);
+        time = setTimeout(() => {
+          callback(...args);
+        }, delay);
+      };
+    }
+
     let table = null
     function createDatatable(paging) {
         return $('#datatable').DataTable({
@@ -226,6 +237,14 @@ <h6 class="d-inline" ><%:author%></h6>
             $(".chord").show()
         }
     }
+    const search = debounce(
+        function ( val ) {
+            table.search(val);
+            table.draw(false);
+            console.log("searched")
+        }, 200
+    );
+
     const config = new Map([
             ["hide_chords", new BooleanOption(document.getElementById("hideChords"), hideChords, false)],
             ["prevent_sleep", new BooleanOption(document.getElementById("preventSleep"), function(value) {
@@ -280,9 +299,8 @@ <h6 class="d-inline" ><%:author%></h6>
 
     });
 
-    document.getElementById("searchInput").addEventListener("input", function (event) {
-        table.search(event.target.value);
-        table.draw();
+    document.getElementById("searchInput").addEventListener("input", function(event) {
+        search(event.target.value)
     })
     </script>
 {% endblock %}
\ No newline at end of file