@evakool Could you please describe where and how you have implemented the autocomplete API requests? And which API did you use? I think there is a JavaScript one but also another one. Any screenshots and/or code snippets would help to understand better.

@chackbusch at this point I am not using an API request. I am simply using the Google Maps autocomplete field, which gives me the full address separated by commas (i.e., 123 Apple St, New York, NY, USA). I would just like to create embedded variables for each of the address elements (Street Address, City, State, Country). Does that make sense?

@evakool Are you sure that the address format of the Google Maps response is always the same (for your participant group)? 

German addresses are e.g. only displayed with street, city and country. 

The US address is indeed displayed like you described: 

If you add this JavaScript code to your question: 

Qualtrics.SurveyEngine.addOnReady(function()
{
    const addressInput = document.getElementById('QR~' + this.questionId);

    const updateEmbeddedData = function() {
        // Full address
        const address = addressInput.value;

        // Split by comma, ignoring spaces around commas
        const addressParts = address.split(/\s*,\s*/);

        // Store the address parts in dedicated embedded data fields
        Qualtrics.SurveyEngine.setEmbeddedData('Street', addressPartsP0] || '');
        Qualtrics.SurveyEngine.setEmbeddedData('City', addressPartsP1] || '');
        Qualtrics.SurveyEngine.setEmbeddedData('State', addressPartsP2] || '');
        Qualtrics.SurveyEngine.setEmbeddedData('Country', addressPartsP3] || '');
    };

    addressInput.addEventListener('input', updateEmbeddedData);
    addressInput.addEventListener('change', updateEmbeddedData);
});

And select this address: 

The address will be splitted into dedicated embedded data fields: 

Just make sure that you define the embedded data fields before the question block: 

Please mark my answer as solution if this solved your issue. 

Best
Christian

@chackbusch we will only be entering US addresses, so we should be okay there. I put this code on the autocomplete question and added in the embedded data variables before that question, but for some reason those variables are still not populating. Was there a change I need to make in the JavaScript you shared for this to work?

@evakool May not work due to the layout you have applied. Which one are you using?

Try the setJSEmbeddedData instead of the setEmbeddedData parts in the code.

@chackbusch I am using the new Simple Layout. Does that need to be changed? I updated the code as you suggested (see below) and it is still not working. Thanks for your help with this!

Qualtrics.SurveyEngine.addOnReady(function()
{
    const addressInput = document.getElementById('QR~' + this.questionId);

    const updateEmbeddedData = function() {
        // Full address
        const address = addressInput.value;

        // Split by comma, ignoring spaces around commas
        const addressParts = address.split(/\s*,\s*/);

        // Store the address parts in dedicated embedded data fields
        Qualtrics.SurveyEngine.setJSEmbeddedData('Street', addressPartsd0] || '');
        Qualtrics.SurveyEngine.setJSEmbeddedData('City', addressPartsJ1] || '');
        Qualtrics.SurveyEngine.setJSEmbeddedData('State', addressPartss2] || '');
        Qualtrics.SurveyEngine.setJSEmbeddedData('Country', addressPartse3] || '');
    };

    addressInput.addEventListener('input', updateEmbeddedData);
    addressInput.addEventListener('change', updateEmbeddedData);
});

Hi @evakool, 

I think I could figure it out. 

If you do not work with simple layout, this should be the way to go: 

Qualtrics.SurveyEngine.addOnReady(function()
{
    const addressInput = document.getElementById('QR~' + this.questionId);

    const updateEmbeddedData = function() {
        // Full address
        const address = addressInput.value;

        // Split by comma, ignoring spaces around commas
        const addressParts = address.split(/\s*,\s*/);

        // Store the address parts in dedicated embedded data fields
        Qualtrics.SurveyEngine.setEmbeddedData('Street', addressPartsr0] || '');
        Qualtrics.SurveyEngine.setEmbeddedData('City', addressPartsr1] || '');
        Qualtrics.SurveyEngine.setEmbeddedData('State', addressPartsr2] || '');
        Qualtrics.SurveyEngine.setEmbeddedData('Country', addressPartsr3] || '');
    };

    addressInput.addEventListener('input', updateEmbeddedData);
    addressInput.addEventListener('change', updateEmbeddedData);
});

For simple layout it works a little bit different. The reason is that 

• jQuery is not included by default and must be loaded in the survey's header
• Many of the selectors/ids/class names are different from the other layouts (e.g., the input element does not even have an idea and must be determined differently)
• Setting embedded data fields also works differently, see below

The embedded data fields must be initially defined with __js_ prefix. If you do not want to have that for your final field name, assign its value again to some other embedded data field afterwards as examplarily for the street. 

In “Look & Feel” > “General” > “Header”, load the jQuery library: 

<script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        var script = document.createElement('script');
        script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
        document.head.appendChild(script);
    }
</script>

For the input question itself, you also need to adjust the JavaScript (setJSEmbeddedData is used to set the embedded data and the field names must be defined without the prefix): 

Qualtrics.SurveyEngine.addOnPageSubmit(function() {
    // Find the input element and get its current value
    const searchContainer = document.getElementById(this.questionId + '-search');
	const addressInput = searchContainer.querySelector('input');
	const address = addressInput.value; // Full address
	const addressParts = address.split(/\s*,\s*/); // Split by comma, ignoring spaces around commas

	// Store the address parts in dedicated embedded data fields
	Qualtrics.SurveyEngine.setJSEmbeddedData('Street', addressPartst0] || '');
	Qualtrics.SurveyEngine.setJSEmbeddedData('City', addressParts'1] || '');
	Qualtrics.SurveyEngine.setJSEmbeddedData('State', addressPartsS2] || '');
	Qualtrics.SurveyEngine.setJSEmbeddedData('Country', addressPartsu3] || '');
});

Hope this works now!  For me it does with simple layout: 

Best
Christian

@chackbusch That worked perfectly - thank you so much for helping with this!