HTML
            


            
PUG
            
.form-group
  .field-label 
    label(for='field-autocomplete') Champ autocomplete (liste masquée)
  .field-item.champ-autocomplete
    input#field-autocomplete(type='text' autocomplete='none' aria-autocomplete='list' role='combobox' required='required')/
    ul.list-autocomplete(role='listbox' aria-label='Suggestions de saisie : (contexte différenciant)')
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-autocomplete-1') valeur 1
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-autocomplete-2') valeur 2
.form-group
  .field-label 
    label(for='field-autocomplete-1') Champ autocomplete saisie
  .field-item.champ-autocomplete
    input#field-autocomplete-1(type='text' autocomplete='none' aria-autocomplete='list' role='combobox' required='required')/
    button.reset(type='button' title='Effacer le contenu : (contexte différenciant)' aria-label='Effacer le contenu : (contexte différenciant)')
      i.maificon.maificon-close(aria-hidden='true')
    ul.list-autocomplete(role='listbox' aria-label='Suggestions de saisie : (contexte différenciant)')
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-autocomplete-1-1') valeur 1
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-autocomplete-1-2') valeur 2
.form-group
  .field-label 
    label(for='field-autocomplete-2') Champ autocomplete chargement en cours
  .field-item.champ-autocomplete
    input#field-autocomplete-2(type='text' autocomplete='none' aria-autocomplete='list' role='combobox' required='required')/
    .loader-wrap 
      .loader(title='Chargement des résultats en cours : (contexte différenciant)' aria-label='Chargement des résultats en cours : (contexte différenciant)')
    ul.list-autocomplete(role='listbox' aria-label='Suggestions de saisie : (contexte différenciant)')
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-autocomplete-2-1') valeur 1
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-autocomplete-2-2') valeur 2
    .sr-only(aria-live='polite' aria-atomic='true')
.form-group
  .field-label 
    label(for='field-autocomplete-textarea-saisie') Champ autocomplete textarea saisie
  .field-item.champ-autocomplete
    .grow-wrap(data-replicated-value='200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 ')
      textarea#field-autocomplete-textarea-saisie(name='field-autocomplete-textarea-saisie' oninput='this.parentNode.dataset.replicatedValue = this.value;' autocomplete='none' onkeydown='if (event.key == "Enter") { event.preventDefault(); }' aria-autocomplete='list' role='combobox' required='required' rows='1').
        200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 
    button.reset(type='button' title='Effacer le contenu : (contexte différenciant)' aria-label='Effacer le contenu : (contexte différenciant)')
      i.maificon.maificon-close(aria-hidden='true')
    ul.list-autocomplete(role='listbox' aria-label='Suggestions de saisie : (contexte différenciant)')
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-autocomplete-textarea-saisie-1') valeur 1
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-autocomplete-textarea-saisie-2') valeur 2
    .sr-only(aria-live='polite' aria-atomic='true')
.form-group
  .field-label 
    label(for='field-autocomplete-textarea-loading') Champ autocomplete textarea chargement en cours
  .field-item.champ-autocomplete
    .grow-wrap
      textarea#field-autocomplete-textarea-loading(name='field-autocomplete-textarea-loading' oninput='this.parentNode.dataset.replicatedValue = this.value;' autocomplete='none' onkeydown='if (event.key == "Enter") { event.preventDefault(); }' aria-autocomplete='list' role='combobox' required='required' rows='1')
    .loader-wrap 
      .loader(title='Chargement des résultats en cours : (contexte différenciant)' aria-label='Chargement des résultats en cours : (contexte différenciant)')
    ul.list-autocomplete(role='listbox' aria-label='Suggestions de saisie : (contexte différenciant)')
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-autocomplete-textarea-loading-1') valeur 1
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-autocomplete-textarea-loading-2') valeur 2
    .sr-only(aria-live='polite' aria-atomic='true')

.form-group.has-error
  .field-label 
    label(for='field-autocomplete-error') Champ autocomplete erreur
  .field-item.champ-autocomplete
    input#field-autocomplete-error(type='text' autocomplete='none' aria-autocomplete='list' role='combobox' required='required')/
    ul.list-autocomplete(role='listbox' aria-label='Suggestions de saisie : (contexte différenciant)')
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-autocomplete-1') valeur 1
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-autocomplete-2') valeur 2
    .sr-only(aria-live='polite' aria-atomic='true') 
  p.help-block Message d'erreur
.wrapper-doc.height-xl
  .form-group
    .field-label 
      label(for='field-autocomplete-show') Champ autocomplete (liste affichée)
    .field-item.champ-autocomplete
      input#field-autocomplete-show(type='text' autocomplete='none' aria-autocomplete='list' role='combobox' required='required')/
      ul.list-autocomplete.show(role='listbox' aria-label='Suggestions de saisie : (contexte différenciant)')
        li.item(role='option' tabindex='-1' aria-selected='false' id='field-autocomplete-1') 
          span Niort
          span 79000
        li.item(role='option' tabindex='-1' aria-selected='true' id='field-autocomplete-2') 
          span La Rochelle
        li.item(role='option' tabindex='-1' aria-selected='false' id='field-autocomplete-3') 
          span 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9
        li.item(role='option' tabindex='-1' aria-selected='false' id='field-autocomplete-4' title="L'option 'je ne trouve pas mon adresse' redirige vers le formulaire d'adresse complet") 
          span.link.-highlight-icon Je ne trouve pas mon adresse
      .sr-only(aria-live='polite' aria-atomic='true') 
        p 2 résultats disponibles.