title: How do you refresh an HTML5 datalist using JavaScript?
body: <p>I'm loading options into an HTML5 <code>datalist</code> element dynamically. However, the browser attempts to show the <code>datalist</code> before the options have loaded. This results in the list not being shown or sometimes a partial list being shown. Is there any way to refresh the list via JavaScript once the options have loaded?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input type="text" id="ingredient" list="ingredients"&gt;
  &lt;datalist id="ingredients"&gt;&lt;/datalist&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$("#ingredient").on("keyup", function(event) {
      var value = $(this).val();
      $.ajax({
          url: "/api/ingredients",
          data: {search: value.length &gt; 0 ? value + "*" : ""},
          success: function(ingredients) {
              $("#ingredients").empty();
              for (var i in ingredients) {
                  $("&lt;option/&gt;").html(ingredients[i].name).appendTo("#ingredients");
              }
              // Trigger a refresh of the rendered datalist
          }
      });
  });
  </code></pre>
  
  <p>Note: In Chrome and Opera, the entire list is only shown if the user clicks on the input after entering text. However, I'd like the entire list to appear <em>as</em> the user types. Firefox is not a problem, as it appears to refresh the list automatically when the options are updated. </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I'm not sure this question has a satisfactory answer, as I believe this is simply a shortcoming of certain browsers. If a <code>datalist</code> is updated, the browser <em>should</em> refresh the list, but some browsers (including Chrome and Opera) simply do not do this. Hacks?</p>