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

Place your #ingredients element is inside #container and try this code:

$.ajax({
    url: "/api/ingredients",
    data: {search: value.length > 0 ? value + "*" : ""},
    success: function(ingredients) {
        $("#ingredients").remove();
        var item = $('');
        for (var i in ingredients) {                
            item.append(""+ ingredients[i].name +"");
        }
        item.appendTo('#container');
    }
});

even better without #container and using jQuery replaceWith():

$.ajax({
    url: "/api/ingredients",
    data: {search: value.length > 0 ? value + "*" : ""},
    success: function(ingredients) {
        var item = $('');
        for (var i in ingredients) {                
            item.append(""+ ingredients[i].name +"");
        }
        $("#ingredients").replaceWith(item);
    }
});