Mapbox auto fill complete address

Question

I use mapbox tools for my autofill place address autocomplete on my project Symfony

I want to know how can i extract full complete address in autofill, i have 2 inputs one for search and one hidden for get full/complete address

<mapbox-address-autofill>
                                        {{ form_widget( form.address, {
                                            'attr': {
                                                'class': 'form-control form-control-solid font-weight-bold',
                                                'placeholder': 'Adresse de départ',
                                                'required': 'required',
                                                'autocomplete': 'address-line1'
                                            }
                                        } ) }}
                                        {{ form_widget( form.address_value, {
                                            'attr': {
                                                'autocomplete': 'full-address'
                                            }
                                        }) }}
                                    </mapbox-address-autofill>

I have this but with tag 'full-addresse' 'complete' 'place_name'

No one workn if you have any solution for get full address to persist this in php Symfony project

Answer 1

"full_address" is a property of the feature object that is returned from a retrieve event, but does not automatically map to any HTML form field autocomplete value. The only object properties that get mapped to HTML elements are the ones corresponding to WHATWG standards, i.e.:

'street-address'
'address-line1'
'address-line2'
'address-line3'
'address-level1'
'address-level2'
'address-level3'
'address-level4'
'country'
'country-name'
'postal-code'

I'm not familiar with PHP, but a way to do this in Javascript would be something like:

const autofill = document.querySelector('mapbox-address-autofill');
const targetInput = document.getElementById('myTargetInput');
autofill.addEventListener('retrieve', (event) => {
  const featureCollection = event.detail;
  const feature = featureCollection[0];
  const fullAddress = feature.properties.full_address;
  targetInput.value = fullAddress;
});