Элемент: свойство ariaAutoComplete

Свойство ariaAutoComplete интерфейса Element отражает значение атрибута aria-autocomplete, который указывает, может ли ввод текста вызвать отображение одного или нескольких предложений предполагаемого значения для раскрывающегося списка, поисковой строки или текстового поля, а также определяет, как будут представлены предложения, если они будут сгенерированы.

Строка с одним из следующих значений:

"inline"

При вводе пользователем текст, предлагающий один способ завершения введённого текста, может динамически вставляться после курсора.

"list"

При вводе пользователем может отображаться элемент, содержащий набор значений, которые могут завершить введённый текст.

"both"

При вводе пользователем может отображаться элемент, содержащий набор значений, которые могут завершить введённый текст. Если он отображается, одно значение в наборе автоматически выбирается, и текст, необходимый для завершения автоматически выбранного значения, появляется после курсора в поле ввода.

"none"

При вводе пользователем не отображается автоматическое предложение, пытающееся предсказать, как пользователь намерен завершить ввод.

В этом примере атрибут aria-autocomplete элемента с идентификатором animal задан как "inline". Используя ariaAutoComplete, мы обновляем значение до "list", что является ожидаемым значением для раскрывающегося списка, который вызывает всплывающее окно listbox.

<div class="animals-combobox">
  <label for="animal">Animal</label>
  <input
    id="animal"
    type="text"
    role="combobox"
    aria-autocomplete="inline"
    aria-controls="animals-listbox"
    aria-expanded="false"
    aria-haspopup="listbox" />
  <ul id="animals-listbox" role="listbox" aria-label="Animals">
    <li id="animal-cat" role="option">Cat</li>
    <li id="animal-dog" role="option">Dog</li>
  </ul>
</div>

let el = document.getElementById("animal");
console.log(el.ariaAutoComplete); // inline
el.ariaAutoComplete = "list";
console.log(el.ariaAutoComplete); // list