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!
MySQL Database => Table => Rows => JSON => Javascript Objects => "firstname" & "lastname" key => Array of first names => Datalist Options.
I successfully created the Array of names:
var nameArray = ["Rick Bross","Madison Smith","Jack Johnson"]; //Example of my array
And set up a loop to .append them to the datalist:
for (var i = 0; i < nameArray.length; i++) {
alert(i + " - " + nameArray[i]); //Works Fine, "0 - Rick Bross", "1 - Madison Smith", etc.
$('#potentials').append("<option value='" + nameArray[i] + ">"); // Not working.
}
Here is my HTML:
<input tabindex='1' list="potentials" type="text" placeholder="First & Last Name" id="name" name="name"></input>
<datalist id="potentials">
</datalist>
Why this isn't populating?
There was a missing apostrophe, try:
$('#potentials').append("<option value='" + nameArray[i] + "'>");