[SOLVED] HTML5 dynamic datalist possible?

Can datalist items filled remotely to make an autocomplete input component? <form> <input type="text" name="color" list="colors"> <datalist id="colors"> <option value="Red"> <option value="Blue"> <option value="Green"> </ datalist> </form> https://code.sololearn.com/Wt05HMSX85Mg/?ref=app

11/30/2020 4:20:32 PM

David Ordás

3 Answers

New Answer

Sort by:

Possible using Javascript window.onload = () => { let dataList = document.querySelector( "#colors" ); let optionValues = [ "Orange", "Cyan", "Magenta", "Yellow", "Black" ]; // add each element of <optionValues> array for( let optionValue of optionValues ) { let newOption = document.createElement( "option" ); newOption.value = optionValue; dataList.appendChild(newOption); } }

Ipang

Hey Ipang and I suppouse that source can be a remote call from an API using fetch Great!!!

David Ordás

Yes David Ordás I guess it is a viable option, but TBH I haven't studied fetch yet. Look forward for someone's code example. Most welcome 👌

Ipang