Javascript address autocomplete
Hi all!
First, thanks for really good job with filament, I love it so far!
Now, I am trying to use external javascript service as a address autocomplete (czech service smartform.cz). It whispers full address when you type in specific field. Once you choose address from the list, it pastes address into coresponding fields (street, city, zip(psč)).
Problem is, that it only sends what is really typed into the fields by the user. Values which are pasted into inputs are not send to the server.
Do you have any clue how to do this? Any help is appreciated.
Thank you very much!
Martin
First, thanks for really good job with filament, I love it so far!
Now, I am trying to use external javascript service as a address autocomplete (czech service smartform.cz). It whispers full address when you type in specific field. Once you choose address from the list, it pastes address into coresponding fields (street, city, zip(psč)).
Problem is, that it only sends what is really typed into the fields by the user. Values which are pasted into inputs are not send to the server.
Do you have any clue how to do this? Any help is appreciated.
Thank you very much!
Martin
Solution
Just to mark a solution, it's a reset the value and emit event:
const inputStreet = document.querySelector('input[id="data.street"]');
const inputCity = document.querySelector('input[id="data.city"]');
const inputZip = document.querySelector('input[id="data.zip"]');
inputStreet.value = street;
inputCity.value = city;
inputZip.value = zip;
inputStreet.dispatchEvent(new Event('input', { bubbles: true }));
inputCity.dispatchEvent(new Event('input', { bubbles: true }));
inputZip.dispatchEvent(new Event('input', { bubbles: true }));
const inputStreet = document.querySelector('input[id="data.street"]');
const inputCity = document.querySelector('input[id="data.city"]');
const inputZip = document.querySelector('input[id="data.zip"]');
inputStreet.value = street;
inputCity.value = city;
inputZip.value = zip;
inputStreet.dispatchEvent(new Event('input', { bubbles: true }));
inputCity.dispatchEvent(new Event('input', { bubbles: true }));
inputZip.dispatchEvent(new Event('input', { bubbles: true }));
