Create autofill with ZIP code as container

Hello,

I am using Algolia Places on one of my projects. I’m trying to create a register form, where when typing in the ZIP code, the other fields city and country are being autocompleted. The ZIP code field itself should simply contain the entered ZIP code. However, I just can’t seem to get it to work.

This is my code:

    const fixedOptions = {
        appId: '...',
        apiKey: '...',
        container: document.querySelector('#zip'),
        templates: 'value'
    };

    const reconfigurableOptions = {
        [some configuration...]
    };
    const placesInstance = places(fixedOptions).configure(reconfigurableOptions);


    placesInstance.on('change', function resultSelected(e) {
        document.querySelector('#city').value = e.suggestion.city || '';
        document.querySelector('#country').value = e.suggestion.country || '';
    });

Now when I fill in the zip code field, I get suggestions for cities in a dropdown. When I pick one, the city appears in the zip code field, the county gets filled in correctly and the city is left blank.

How do I make this work?

Hi @matthias_001,

Welcome to the Algolia Community!

So that we can help find the problem, could you make a codesandbox at codesandbox.io to demonstrate the issue?

Let us know when you get that done!

Hi!

Yes, here it is!

The relevant JS code can be found in the autocomplete.js file.

I was actually able to get it to work by altering the code a little bit. Now I also want the street to only suggest streets that occur in that zip code area. Maybe someone can hint me in the right direction?