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!