Creating a HTML5 datalist on the fly

Question

I\'m trying to create a datalist on they fly and attach it to an existing input element. But nothing happens (no dropdown arrow is shown) jQuery would be acceptable, too.

Answer 1

With only the input present when the page is loaded :

notice how I use "input.setAttribute('list','datalist')" and not "input.list = 'datalist' " directly.

var datalist = document.createElement('datalist');
datalist.id = "datalist";
document.body.appendChild(datalist);
["Seattle", "Las Vegas", "New York", "Salt lake City"].forEach(function(data) {
  var option = document.createElement('option')
  option.value = data
  datalist.appendChild(option)
});
document.querySelector('#my-text-box').setAttribute('list', "datalist");