How do you refresh an HTML5 datalist using JavaScript?

Question

I\'m loading options into an HTML5 datalist element dynamically. However, the browser attempts to show the datalist before the options have loaded.

Answer 1

I had the same problem when updating datalist.

The new values would not show until new input event.

I tried every suggested solutions but nothing using Firefox and updating datalist via AJAX.

However, I solved the problem (for simplicity, I'll use your example):

$("#ingredient").on("**input**", function(event) { ....}

Autocomplete and input is the couple that solve my problems and it works with Chrome too.