Work in Progress: How to fetch data and display the results as options in a dropdown

<aside> 💡 The following example shows how to fetch data to display a dropdown of places from Google Places API

</aside>

• Add an Input component on the page

• Add an Option Buttons component below it

• Create a new computed field and add to USER DATA INPUT FIELDS the input field

• Edit the computed field, following the structure below and replacing YOUR_KEY:

function result( {
  input_field,
}) {
  if (!input_field) return []
  const input = document.querySelector("input.ComponentKey-input_field");
    return fetch(`https://savvy-api-proxy.heysavvy.workers.dev/?url=${encodeURIComponent(`https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${input_field}&types=address&components=country:us&key=YOUR_KEY`)}`)
    .then(response => response.json())
    .then(data => {
      console.log(data)
      let results = data.predictions.map(result => {
        return {
          key:result.place_id,
          text:result.description
        }
      })
      return results
    })
}

• Select the Option Buttons and go to More Options

• Select the Advanced dropdown and then in the OPTIONAL - BUTTON REPEATER KEY select the Computed Field that fetches the options

• Create a new computed field for the Placeholder text in the input field. Add to USER DATA INPUT FIELDS the option buttons and the current page key. It should be similar to:

function result( {
  option_buttons,
  current_page_key,
},
{
  setUserData
} ) {
  if(current_page_key === 'input_field' && option_buttons) {
    const input = document.querySelector("input.ComponentKey-input_field");
    const dropdownButton = document.querySelector(`.ElementKey-${option_buttons}`);
    
    if (option_buttons && dropdownButton) {
      setTimeout(() => {
        input.value = dropdownButton.innerText
        setUserData('input_field', dropdownButton.innerText)
      }, 250)
      return input.value
    }
    return 'Search for address'
  }
  return 'Search for address'
}

• Select the input field and add the computed field for the placeholder text into PLACEHOLDER and into DEFAULT VALUE in More Options

• Next, create a new computed field to open the dropdown when the input field is filled. Add to USER DATA INPUT FIELDS the input field and the option buttons:

function result({ input_field, option_buttons }) {
  const dropdownButton = document.querySelector(`.ElementKey-${option_buttons}`);
  
  if (!input_field) {
    // No search query, so don't allow selection -> close dropdown
    return false
  }

  if (!option_buttons) {
    // No address selected, so allow selection -> open dropdown
    return true
  }
  
  if (dropdownButton && input_field !== dropdownButton.innerText) {
    // Text changed since address selected, so allow selection -> open dropdown    
    return true
  }

  // Otherwise, don't allow selection -> close dropdown
  return false
}

• And create a fourth computed field that contains the following code:

function result({}, { setUserData }) {
  setUserData('option_buttons', null)
}

• Select the Option Buttons and add a condition to display it only if open_address_dropdown Is True

• Create a new Data Output, select Manual trigger Only and trigger it on page load of the page that contains the input and the option buttons. It should look like:

function output(userData, context) {
  document
    .querySelector("input.ComponentKey-input_field")
    .addEventListener("keyup", function () {
      context.setUserData('open_address_dropdown', true);
    });
}

• Finally, style the option buttons component to look like a dropdown.