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
Solution:Jump to 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"]');...
5 Replies
I tried to create a javascript listener which would update "value" attribute of corresponding field, but with no success:
document.querySelector('.smartform-instance-personal.smartform-street-and-number').addEventListener('input', function() {
var personalAddress = this.textContent; // nebo this.innerText
document.querySelector('.smartform-instance-personal.smartform-street-and-number').value(personalAddress);
});Are you only using smartform for this? Would an alternative work? If Google Maps is viable for you, my Maps package would do what you need.
I used it in another application, so Iam used to it and also it is updated daily from czech official addresses. I somehow overlooked your package, so i will give it a try, because this is pain and I address autocomplete is crucial. Thanks (y)
OK. Just a suggestion, I don't know how up to date or accurate Google Maps is in CZ. Ask in #google-maps if you need help setting it up.
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 }));