<label for="text-field" class="" aria-label="">
Partenza <span aria-hidden="true">*</span>
<input id="text-field" type="text" class="" placeholder="Seleziona l'aeroporto di partenza" value="" required aria-required="true" aria-describedby="text-note">
<ul class="u-typeahead" style="top: 60px; left: 0px; display: none">
<li class="u-typeahead__list-item active" data-value="Bologna, Guglielmo Marconi [BLQ] (ITALIA)">
<a href="#">Bologna, Guglielmo Marconi [BLQ] (ITALIA)</a>
</li>
<li class="u-typeahead__list-item active" data-value="Bologna, Guglielmo Marconi [BLQ] (ITALIA)">
<a href="#">Bologna, Guglielmo Marconi [BLQ] (ITALIA)</a>
</li>
<li class="u-typeahead__list-item active" data-value="Bologna, Guglielmo Marconi [BLQ] (ITALIA)">
<a href="#">Bologna, Guglielmo Marconi [BLQ] (ITALIA)</a>
</li>
<li class="u-typeahead__list-item active" data-value="Bologna, Guglielmo Marconi [BLQ] (ITALIA)">
<a href="#">Bologna, Guglielmo Marconi [BLQ] (ITALIA)</a>
</li>
<li class="u-typeahead__list-item active" data-value="Bologna, Guglielmo Marconi [BLQ] (ITALIA)">
<a href="#">Bologna, Guglielmo Marconi [BLQ] (ITALIA)</a>
</li>
<li class="u-typeahead__list-item active" data-value="Bologna, Guglielmo Marconi [BLQ] (ITALIA)">
<a href="#">Bologna, Guglielmo Marconi [BLQ] (ITALIA)</a>
</li>
<li class="u-typeahead__list-item active" data-value="Bologna, Guglielmo Marconi [BLQ] (ITALIA)">
<a href="#">Bologna, Guglielmo Marconi [BLQ] (ITALIA)</a>
</li>
<li class="u-typeahead__list-item active" data-value="Bologna, Guglielmo Marconi [BLQ] (ITALIA)">
<a href="#">Bologna, Guglielmo Marconi [BLQ] (ITALIA)</a>
</li>
<li class="u-typeahead__list-item active" data-value="Bologna, Guglielmo Marconi [BLQ] (ITALIA)">
<a href="#">Bologna, Guglielmo Marconi [BLQ] (ITALIA)</a>
</li>
<li class="u-typeahead__list-item active" data-value="Bologna, Guglielmo Marconi [BLQ] (ITALIA)">
<a href="#">Bologna, Guglielmo Marconi [BLQ] (ITALIA)</a>
</li>
</ul>
<p class="c-field__note u-visuallyhidden" id="text-note">
Compila il campo
</p>
</label>
<label for="{{ label_id }}" class="{{ label_class }}" aria-label="{{ screen-reader-text }}">
{{ label_message }} {{#if atom-input.required}}<span aria-hidden="true">*</span>{{/if}}
<input
id="{{ atom-input.id }}"
type="{{ atom-input.type }}"
class="{{ 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}}
>
<ul class="u-typeahead" style="top: 60px; left: 0px; display: none"> {{!-- Remove display: none to see the list below --}}
{{#repeat 10}}
<li class="u-typeahead__list-item active" data-value="Bologna, Guglielmo Marconi [BLQ] (ITALIA)">
<a href="#">Bologna, Guglielmo Marconi [BLQ] (ITALIA)</a>
</li>
{{/repeat}}
</ul>
{{#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": "Seleziona l'aeroporto di partenza",
"required": true,
"hasNote": true,
"describedby": "text-note",
"hasSubmitButton": false
},
"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": "Compila il campo",
"note_class": "u-visuallyhidden"
}
There are two variants of autocomplete input:
@autocomplete--default, or simply @autocomplete (is the same)@autocomplete--typeaheadDefault 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
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.
Both the variants populate the list as soon as the user types the characters from the keyboard, but with differents plugin.