Autocomplete using an autocomplete api data source

I’m looking to setup an autocomplete input which has an API data source. The API data source has requires a query parameter that is used to search the remote database and provide results.

I’ve tested the API data source and it is working fine, when the query parameter comes from a standard input.

The problem I am having is attaching that to an autocomplete element as described here.

The API data source:

<dmx-api-datasource id="ingredients_autocomplete" is="dmx-fetch" url="https://api.spoonacular.com/food/ingredients/autocomplete?apiKey=7e4100REDACTED26393582" dmx-param:query="modal_ingredient.form_ingredient.autocomplete1.value">

And the autocomplete component:

<input id="autocomplete1" name="autocomplete1" is="dmx-autocomplete" dmx-bind:data="ingredients_autocomplete.data" optiontext="name" optionvalue="name">

I’m assuming the issue is that the API points back to the autocomplete for it’s search value, but the autocomplete doesn’t really have a value after the user types the same way a text input does.

Is there a Wappler way of getting this done, or am I going to need to code something?

EDIT: I have a working solution outside of Wappler, but a native solution would be great!