# 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:

```jsx
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:

```jsx
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:

```jsx
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:

```jsx
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:

```jsx
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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.trysavvy.com/other-useful-docs/work-in-progress/pending/work-in-progress-how-to-fetch-data-and-display-the-results-as-options-in-a-dropdown.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.