diff --git a/templates/landing_form.html b/templates/landing_form.html index b12da24..49cf39d 100644 --- a/templates/landing_form.html +++ b/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 @@ - \ No newline at end of file +