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.
Last updated