DART - Setting datalist to TextInputElement programmatically

Question

I am trying to convert this snippet HTML5 code into DART:

        <input type="text" list="zoompercent">
          <datalist id="zoompercent" >
             <option>25%
             <option>50%
             <option>75%
             <option>100%
             <option>150%
             <option>200%
             <option>300%
             <option>400%
          </datalist>

I can instantiate the input field as

    TextInputElement zoomPresets = new TextInputElement();

I can also instantiate the data list as:

    DataListElement presetDataList = new DataListElement();
    OptionElement option1 = new OptionElement();
    option1.value="25%"; 
    presetDataList.children.add(option1);
...

But how can I set the presetDataList as a list to zoomPresets? zoomPresets.list is final.

Advise, please.

Answer 1

Just set the list Attribute:

import 'dart:html';

main () {
  TextInputElement zoomPresets = new TextInputElement();

  DataListElement presetDataList = new DataListElement()..id="presetDataList";
     OptionElement option1 = new OptionElement();
     option1.value="25%";
     presetDataList.children.add(option1);

     zoomPresets.attributes['list'] = presetDataList.id;

     document.body.append(zoomPresets);
     document.body.append(presetDataList);
}