HTML datalist values from array in JavaScript

Question

I have a simple program which has to take the values from the text file on a server and then populate the datalist as the selection in the input text field.

For this purpose the first step I want to take is that I want to know how the JavaScript array can be used as a datalist option dynamically.

My code is:

<html>
<script>

var mycars = new Array();
mycars[0]='Herr';
mycars[1]='Frau';

</script>

<input name="anrede" list="anrede" />
<datalist id="anrede">
  <option value= mycars[0]></option>
  <option value="Frau"></option> 
</datalist>
</html>

I want to populate the input text field containing the datalist as suggestions from the array. Also here I haven't taken into account the array values. Actually I need not two datalist options but an arbitrary number (depending on the array length).

score 45 · Answer 1 · answered Feb 18 '16 at 02:44

This is an old question and already sufficiently answered, but I'm going to throw the DOM method in here anyway for anyone that doesn't like to use literal HTML.

<input name="car" list="anrede" />
<datalist id="anrede"></datalist>

<script>
var mycars = ['Herr','Frau'];
var list = document.getElementById('anrede');

mycars.forEach(function(item){
   var option = document.createElement('option');
   option.value = item;
   list.appendChild(option);
});
</script>

Here's the fiddle.

Thanks! The .innerHTML method in the accepted answer didn't work for my situation, but yours did. — InvictusMKS, Apr 05 '21 at 16:01

score 30 · Accepted Answer · edited Sep 21 '20 at 08:15

30

I'm not sure if I understood your question clearly. Anyway, try this:

var mycars = new Array();
mycars[0] = 'Herr';
mycars[1] = 'Frau';

var options = '';

for (var i = 0; i < mycars.length; i++) {
  options += '<option value="' + mycars[i] + '" />';
}

document.getElementById('anrede').innerHTML = options;

<input name="car" list="anrede" />
<datalist id="anrede"></datalist>

edited Sep 21 '20 at 08:15

kabirbaidhya

3,264
3
34
59

answered Jul 29 '13 at 16:45

Andre Calil

7,652
34
41

score 18 · Answer 3 · answered May 03 '17 at 10:46

If you are using ES6 you could do it this way, this is Paul Walls techniques with ES6 syntax.

const list = document.getElementById('anrede'); 

['Herr','Frau'].forEach(item => {
  let option = document.createElement('option');
  option.value = item;   
  list.appendChild(option);
});

<input name="car" list="anrede" />
<datalist id="anrede"></datalist>

score 4 · Answer 4 · edited Aug 25 '23 at 22:35

4

There is also a constructor to create an option: new Option()

const
  dtl_anrede = document.getElementById('anrede')
, myCars     = ['Herr', 'Frau']
  ;

myCars.forEach(car => dtl_anrede.appendChild(new Option('', car)))

<input name="car" list="anrede" />
<datalist id="anrede"></datalist>

edited Aug 25 '23 at 22:35

Matthias Braun

32,039
22
142
171

answered Aug 26 '21 at 15:04

Mister Jojo

20,093
6
21
40

score 3 · Answer 5 · answered Jul 29 '13 at 16:50

You can do it jQuery way - but on the other hand, since you are processing data on the server, you might generate HTML directly there (just a suggestion).

<script>

var mycars = new Array();
mycars[0]='Herr';
mycars[1]='Frau';

$(document).ready( function() {
    $(mycars).each( function(index, item) {
        var option = $('<option value="'+item+'"></option>');
        $('#anrede').append(option);
    });
});

</script>

<input name="anrede" list="anrede" />
<datalist id="anrede">
    <!-- options are filled in the script -->
</datalist>

Here's a JSFiddle with this code so you can immediatelly try it: http://jsfiddle.net/mBMrR/

score 2 · Answer 6 · answered Sep 20 '20 at 12:00

A more performant way of doing this is to use fragment.

Append the option elements to the <datalist> dynamically, but instead of adding every item from the list, use fragment to avoid reflow and render them into the DOM just once.

var datalist = document.getElementById('anrede');
var fragment = document.createDocumentFragment();

var myCars = ['Herr', 'Frau'];

// Prepare the option elements to be rendered.
myCars.forEach(function(car) {
  var option = document.createElement('option');
  var text = document.createTextNode(car);

  option.value = car;
  option.appendChild(text);
  fragment.appendChild(option);
});

// Append all of them to DOM.
datalist.appendChild(fragment);

<input name="anrede" list="anrede" />
<datalist id="anrede"></datalist>

score 1 · Answer 7 · answered May 15 '23 at 15:05

1

const datalist = document.getElementById('anrede');
for (const item of myCars) 
  datalist.appendChild(new Option(null,item));

This is the most performant and concise way to do it.

answered May 15 '23 at 15:05

Enceladus

55
6

HTML datalist values from array in JavaScript

7 Answers7

Linked