How to change the datasource dynamically based on the value entered in the input

[papiya130]

I have a requirement where the suggestions will change based on the user input, I have to call an API with the value entered in the input field and the response differs for each value.( I have to map the response as the data for autoComplete)
How do I set the datasource dynamically? where do I call my function?

I can see the data item being set in the sample code is
const autoCompleteJS = new autoComplete({
placeHolder: "Enter your street address",
data: {
src: ["Sauce - Thousand Island", "Wild Boar - Tenderloin", "Goat - Whole Cut"],
cache: true,
},
});

Any help or suggestions would be great

[folknor]

q is the query as written in the input field and potentially modified by config.query for sanitization etc.

let foo = new autoComplete({
	data: {
		src: async q => {
			let data
			let url = new URL(...)
			url.searchParams.append("search", q)

			await fetch(url, stdparams)
				.then(json => (data = json))

			return data.foo
		},
		keys: ["bar", "baz"],
		cache: false
	}
})

[papiya130]

Thanks @folknor for the help, I have another scenario that needs to be managed.
If I want to repopulate the search suggestions based on the selection made. how should i go about it..
Scenario is: User types the address, get search suggestions. selects address from the suggested list. On selection i need to make another API call and repopulate the search suggestions.