From c2f4de9199786465059ba740e7da12d9ff6d2b5e Mon Sep 17 00:00:00 2001
From: Stefan Momm <stefan.momm@ventura-digital.de>
Date: Thu, 6 Jun 2024 10:54:55 +0200
Subject: [PATCH] feat: add debounce function to improve filter performance
 (#17)

* feat: add debounce function to improve filter performance

* feat: change input type to search
---
 assets/js/input.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/assets/js/input.js b/assets/js/input.js
index 7cadb39..dd94dae 100755
--- a/assets/js/input.js
+++ b/assets/js/input.js
@@ -42,7 +42,7 @@
         <div class="acf-svg-icon-picker__popup">
         <a class="acf-svg-icon-picker__popup__close" href="javascript:">close</a>
         <h4 class="acf-svg-icon-picker__popup__title">ACF Icon Picker - Choose icon</h4>
-        <input class="acf-svg-icon-picker__filter" type="text" id="filterIcons" placeholder="Start typing to filter icons" />
+        <input class="acf-svg-icon-picker__filter" type="search" id="filterIcons" placeholder="Start typing to filter icons" />
           ${list}
         </div>
       </div>`
@@ -161,9 +161,17 @@
         setListHeight();
       }
 
+      function debounce(func, wait) {
+        var timeout;
+        return function (...args) {
+          clearTimeout(timeout);
+          timeout = setTimeout(() => func.apply(this, args), wait);
+        };
+      }
+
       iconsFilter.focus();
 
-      iconsFilter.addEventListener('keyup', displayResults);
+      iconsFilter.addEventListener('keyup', debounce(displayResults, 300));
 
       // Closing
       jQuery('.acf-svg-icon-picker__popup__close').on('click', function (e) {