CODEWITHSUNDEEP
jqueryhtmlfor-loopappendhtml-datalist
Rick Bross
Rick Bross

Reputation: 1082

Dynamic HTML5 Datalist

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 &amp; Last Name" id="name" name="name"></input>
<datalist id="potentials">
</datalist>

Why this isn't populating?

Upvotes: 21

Views: 40704

Answers (3)

King Of The Jungle
King Of The Jungle

Reputation: 745

I know this answer is late but it might help someone.

var nameArray = ["Rick Bross","Madison Smith","Jack Johnson"];

Add options to the datalist.
- "attr" helps if you need an i.d to identify each option.
- "text" is the content to be displayed.

$.each(nameArray, function(i, item) { $("#potentials").append($("<option>").attr('value', i).text(item)); });

Upvotes: 15

kuncajs
kuncajs

Reputation: 1098

There was a missing apostrophe, try:

$('#potentials').append("<option value='" + nameArray[i] + "'>");

Upvotes: 17

Andrew Traub
Andrew Traub

Reputation: 1

Try $("datalist#potentials).append...

Upvotes: -6

Related Questions