I am looking to have a text field that uses mapbox address https://docs.mapbox.com/mapbox-search-js/guides/autofill/web/ autofill feature. The goal is to allow people to search for an address, then hit the next button to pass the selected value to typebot.

Anyone have any idea on how I can do this? I've done scripts, like this, but it doesn't seem to execute or work:
document.addEventListener('DOMContentLoaded', function () {
// Inject the Mapbox script dynamically
const mapboxScript = document.createElement('script');
mapboxScript.id = "search-js";
mapboxScript.defer = true;
mapboxScript.src = "https://api.mapbox.com/search-js/v1.0.0-beta.24/web.js";
document.head.appendChild(mapboxScript);

mapboxScript.onload = function () {
const initializeMapbox = (input) => {
// Instantiate a <mapbox-address-autofill> element
const autofillElement = new mapboxsearch.MapboxAddressAutofill();

// Set the Mapbox Access Token
autofillElement.accessToken = 'API KEY HERE';

// Set the autofill options
autofillElement.options = {
country: 'us',
};

const theForm = input.parentElement;

// Append the <input> to <mapbox-address-autofill>
autofillElement.appendChild(input);

// Append <mapbox-address-autofill> to the <form>
theForm.appendChild(autofillElement);
};

// Use a MutationObserver to watch for the input element
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.nodeType === 1 && node.matches('input[placeholder="Address Search"]')) {
initializeMapbox(node);
observer.disconnect(); // Stop observing once the input is found and initialized
}
});
});
});

// Start observing the body for added nodes
observer.observe(document.body, { childList: true, subtree: true });
};
});