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

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 }));

Jump to solution

i really can't play thatOP•9/19/23, 7:57 PM

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);
});

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);
});

cheesegrits•9/27/23, 12:42 AM

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.

Ccheesegrits Are you only using smartform for this? Would an alternative work? If Google Ma...

i really can't play thatOP•9/27/23, 7:33 AM

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)

cheesegrits•9/27/23, 9:05 AM

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

i really can't play that•11/18/24, 10:04 AM

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); });