Foehn Design System

Datalist: Default 

<div class="form-group">
    <label for="testDataInput" id="testDataInputLabel">Quel est votre fruit favoris ?</label>
    <datalist id="list">
        <select class="form-control" name="testDataInput" aria-labelledby="testDataInputLabel">
            <option>Abricot</option>
            <option>Ananas</option>
            <option>Citron</option>
            <option>Fruit de la passion</option>
            <option>Grenade</option>
            <option>Groseille</option>
            <option>Kaki</option>
            <option>Kiwi</option>
        </select> <small id="testDataInputfallbackLabel" class="form-text">Merci de le spécifier s&#39;il ne figure pas dans la liste</small>
    </datalist>
    <input id="testDataInput" class="form-control" name="state" list="list" aria-labelledby="testDataInputfallbackLabel">
</div>
 
<div class="form-group">
  <label for="{{ id }}" id="{{ id }}Label">{{ label }}</label>
  <datalist id="{{ list.id }}">
    <select class="form-control" name="{{ id }}" aria-labelledby="{{ id }}Label">
      {%- for option in list.options %}
      <option>{{ option.name }}</option>
      {%- endfor %}
    </select> <small id="{{ id }}fallbackLabel" class="form-text">{{ fallbackLabel }}</small>
  </datalist>
  <input id="{{ id }}" class="{{ class }}" name="state" list="{{ list.id }}" aria-labelledby="{{ id }}fallbackLabel">
</div>
 
{
  "label": "Quel est votre fruit favoris ?",
  "id": "testDataInput",
  "class": "form-control",
  "list": {
    "id": "list",
    "options": [
      {
        "name": "Abricot"
      },
      {
        "name": "Ananas"
      },
      {
        "name": "Citron"
      },
      {
        "name": "Fruit de la passion"
      },
      {
        "name": "Grenade"
      },
      {
        "name": "Groseille"
      },
      {
        "name": "Kaki"
      },
      {
        "name": "Kiwi"
      }
    ]
  },
  "fallbackLabel": "Merci de le spécifier s'il ne figure pas dans la liste"
}

This component makes use of the datalist element, which, in concert with the list attribute, enables native input suggestions in the browser (a.k.a. predictive typing). As Figure 3.7 shows, browsers that don’t support datalist will see the label, the select, the text “If other, please specify,” and the text field; browsers that support datalist will see the label and the text field only because the datalist element is allowed to contain only option elements (which it cleverly plucks from within the select).


Two interpretations of the same markup: a browser that understands ‘datalist’ displays one thing (above) and a browser that doesn’t displays something else (below).