title: Dynamic HTML5 Datalist
body: <p>So I am having a bit of an issue getting my HTML5 Datalist to populate dynamically from a javascript array that is being populated from values of a key of an object that is being populated via rows in a MySQL database. Phew!</p>
  <p>MySQL Database =&gt; Table =&gt; Rows =&gt; JSON =&gt; Javascript Objects =&gt; &quot;firstname&quot; &amp; &quot;lastname&quot; key =&gt; Array of first names =&gt; Datalist Options.</p>
  <p>I successfully created the Array of names:</p>
  <pre><code>var nameArray = [&quot;Rick Bross&quot;,&quot;Madison Smith&quot;,&quot;Jack Johnson&quot;]; //Example of my array
  </code></pre>
  <p>And set up a loop to .append them to the datalist:</p>
  <pre><code>for (var i = 0; i &lt; nameArray.length; i++) {
      alert(i + &quot; - &quot; + nameArray[i]); //Works Fine, &quot;0 - Rick Bross&quot;, &quot;1 - Madison Smith&quot;, etc.
      $('#potentials').append(&quot;&lt;option value='&quot; + nameArray[i] + &quot;&gt;&quot;); // Not working.
  }
  </code></pre>
  <p>Here is my HTML:</p>
  <pre><code>&lt;input tabindex='1' list=&quot;potentials&quot; type=&quot;text&quot; placeholder=&quot;First &amp;amp; Last Name&quot; id=&quot;name&quot; name=&quot;name&quot;&gt;&lt;/input&gt;
  &lt;datalist id=&quot;potentials&quot;&gt;
  &lt;/datalist&gt;
  </code></pre>
  <p>Why this isn't populating?</p>