templates/landing_form.html

@@ -167,7 +167,7 @@
       }
 
       // Function to update list of voies (calls backend API)
-      function updateVoies(codeInsee, search = '') {
+      function updateVoies(search = '') {
         var api = "addresses/fantoirvoies/" + codeInsee + '?limit=15';
         if (search != '') {
           api += "&s=" + search;
@@ -201,6 +201,21 @@
             console.error("Error fetching communes:", err)
           })
       }
+
+      function fetchWithBackoff (fetchFn, timeout, input) {
+        if(timeout !== null) {
+            clearTimeout(timeout);
+        }
+        if (input.length < 3) {
+            return null;
+        }
+        timeout = setTimeout(() => {
+            const cleanInput = sanitizeInputStr(input);
+            fetchFn(cleanInput);
+        }, 100);
+        return timeout;
+      }
+
       $('#methodAddress').on('show.bs.collapse', function () {
         $('#communeInput').trigger('input')
         $('#communeInput').trigger('keyup')
@@ -216,10 +231,10 @@
         $('#numeroVoieInput').focus();
       });
 
-      $('#communeInput').on('keyup', function () {
+      let timeoutCommune = null;
+      $('#communeInput').on('input', function () {
         controllerCommunes.abort();
-        inputStr = sanitizeInputStr($(this).val());
-        updateCommunes(inputStr);
+        timeoutCommune = fetchWithBackoff(updateCommunes, timeoutCommune, $(this).val());
       });
 
       $('#communeInput').on('input', function () {
@@ -227,10 +242,11 @@
           $('#voieForm').collapse('hide');
         }
       });
-      $('#voieInput').on('keyup', function () {
+
+      let timeoutVoie = null;
+      $('#voieInput').on('input', function () {
         controllerVoies.abort();
-        inputStr = sanitizeInputStr($(this).val());
-        updateVoies(codeInsee, inputStr);
+        timeoutVoie = fetchWithBackoff(updateVoies, timeoutVoie, $(this).val());
       });
       $('#voieInput').on('input', function () {
         if ($(this).val() === '') {
@@ -246,4 +262,4 @@
   </script>
 </body>
 
-</html>
+</html>