<label for="text-field" class="  has-button" aria-label="">
    Partenza <span class="required-marker" aria-hidden="true">*</span>
    <input id="text-field" type="text" class="js-combobox " placeholder="" value="" required aria-required="true" aria-describedby="text-note" list="airports" data-combobox-prefix-class="combobox" data-combobox-case-sensitive="no" data-combobox-search-option="containing" data-combobox-help-text="Premi il tasto TAB o le frecce direzionali per accedere e navigare attraverso i suggerimenti. Conferma la tua scelta col tasto INVIO, oppure premi il tasto ESC per chiudere la lista dei suggerimenti." data-suggestion-single="C'è " data-suggestion-plural="Ci sono " data-suggestion-word="Suggerimento" data-suggestion-word-plural="Suggerimenti" data-combobox-see-more-text="Guarda più risultati">
    <button type="submit" class="c-button c-button--submit c-button--searchIcon " aria-label="Avvia la ricerca">
        <svg class="c-icon c-icon--18">
            <use xlink:href="#ic_search_black_24px"></use>
        </svg> </button>
    <datalist id="airports">
        <option value="Dubai, Al Maktoum Intl [DWC] (EMIRATI ARABI)">
        <option value="Roma, Fiumicino [FCO] (ITALIA)">
        <option value="New York Ny, John F Kennedy Intl [JFK] (STATI UNITI)">
        <option value="Parigi, Charles De Gaulle [CDG] (FRANCIA)">
        <option value="Berlino, Schoenefeld [SXF] (GERMANIA)">
        <option value="Londra, Heathrow [LHR] (REGNO UNITO)">
    </datalist>
    <p class="c-field__note " id="text-note">
        Seleziona l'aeroporto di partenza
    </p>
</label>
<label for="{{ label_id }}" class="{{ label_class }} {{#if atom-input.hasSubmitButton}} has-button{{/if}}"
  aria-label="{{ screen-reader-text }}">
  {{ label_message }} {{#if atom-input.required}}<span class="required-marker" aria-hidden="true">*</span>{{/if}}
  <input id="{{ atom-input.id }}" type="{{ atom-input.type }}" class="js-combobox {{ atom-input.class }}"
    placeholder="{{ atom-input.placeholder }}" value="{{ atom-input.value }}" {{#if atom-input.required}} required
    aria-required="true" {{/if}} {{#if atom-input.hasNote}} aria-describedby="{{ atom-input.describedby }}" {{/if}}
    {{#if atom-input.isInvalid}} aria-invalid=”true” {{/if}} {{#if atom-input.isReadonly}} readonly {{/if}} {{#if
    atom-input.isDisabled}} disabled {{/if}} list="{{ autocomplete.datalist-id }}"
    data-combobox-prefix-class="{{ autocomplete.prefix-class }}"
    data-combobox-case-sensitive="{{ autocomplete.case-sensitive }}"
    data-combobox-search-option="{{ autocomplete.search-option }}"
    data-combobox-help-text="{{ autocomplete.help-text }}" data-suggestion-single="C'è "
    data-suggestion-plural="Ci sono " data-suggestion-word="Suggerimento" data-suggestion-word-plural="Suggerimenti"
    data-combobox-see-more-text="Guarda più risultati">
  {{#if atom-input.hasSubmitButton}}
  <button type="submit" class="c-button c-button--submit c-button--searchIcon {{atom-input.submitButtonModifier}}"
    aria-label="Avvia la ricerca">
    {{> @icon search-icon }}
  </button>
  {{/if}}
  <datalist id="{{ autocomplete.datalist-id }}">
    {{#each autocomplete.options }}
    <option value="{{ this.value }}">
      {{/each}}
  </datalist>
  {{#if atom-input.hasNote}}
  <p class="c-field__note {{ note_class }}" id="{{ note_id }}">
    {{{ note_message }}}
  </p>
  {{/if}}
</label>
{
  "label_id": "text-field",
  "label_message": "Partenza",
  "label_class": "",
  "atom-input": {
    "id": "text-field",
    "type": "text",
    "class": "",
    "placeholder": "",
    "required": true,
    "hasNote": true,
    "describedby": "text-note",
    "hasSubmitButton": true
  },
  "search-icon": {
    "class": "c-icon c-icon--18",
    "symbol": "ic_search_black_24px"
  },
  "autocomplete": {
    "datalist-id": "airports",
    "prefix-class": "combobox",
    "case-sensitive": "no",
    "search-option": "containing",
    "help-text": "Premi il tasto TAB o le frecce direzionali per accedere e navigare attraverso i suggerimenti. Conferma la tua scelta col tasto INVIO, oppure premi il tasto ESC per chiudere la lista dei suggerimenti.",
    "options": [
      {
        "value": "Dubai, Al Maktoum Intl [DWC] (EMIRATI ARABI)"
      },
      {
        "value": "Roma, Fiumicino [FCO] (ITALIA)"
      },
      {
        "value": "New York Ny, John F Kennedy Intl [JFK] (STATI UNITI)"
      },
      {
        "value": "Parigi, Charles De Gaulle [CDG] (FRANCIA)"
      },
      {
        "value": "Berlino, Schoenefeld [SXF] (GERMANIA)"
      },
      {
        "value": "Londra, Heathrow [LHR] (REGNO UNITO)"
      }
    ]
  },
  "note_id": "text-note",
  "note_message": "Seleziona l'aeroporto di partenza",
  "note_class": ""
}
  • Handle: @autocomplete--with-button
  • Preview:
  • Filesystem Path: src/views/01-atoms/form-elements/autocomplete/autocomplete.hbs
  • References (1): @icon

Autocomplete

There are two variants of autocomplete input:

  • @autocomplete--default, or simply @autocomplete (is the same)
  • @autocomplete--typeahead

▶️ Default Autocomplete with Combobox suggestion

Default autocomplete works with jquery-accessible-autocomplete-list-aria plugin.

Documentation here: https://github.com/nico3333fr/jquery-accessible-autocomplete-list-aria.

This plugin is well accessible and there are lot of feature for screen reader.

It works with <datalist> element.

Is fine if you have few <options> inside it, not really if there are tons of <options>, especially in terms of performance.

This is actually used by Eminds. They have ASPX pages with webforms that inject all javascript via AJAX.

CSS path of combobox-suggestion: src/sass/06-vendors/_autocomplete.scss

▶️ Autocomplete with Typeahead suggestion

Typeahead variant of the autocomplete works with Typeahead Bootstrap v2.3.2 plugin.

Documentation here: http://getbootstrap.com/2.3.2/javascript.html#typeahead. (This documentation is no longer officially supported).

This variant is used by Endurance. They manage datas in a different way from Eminds and they prefer to use the Bootstrap plugin for previous experience on the old site.

It works with simple HTML list <ul> and <li>.

CSS path of typeahead: src/sass/07-trumps/_trumps.typeahead.scss

PS: Remove the inline “display: none” to see the list.

ℹ️ Important

Both the variants populate the list as soon as the user types the characters from the keyboard, but with differents plugin.