元素:ariaAutoComplete 属性

基线 2023

新可用

2023 年 10 月起,此功能可在最新的设备和浏览器版本中使用。此功能可能在较旧的设备或浏览器中无法使用。

ariaAutoCompleteElement 接口的一个属性,它反映了 aria-autocomplete 属性的值,该属性指示输入文本是否可以触发显示一个或多个用户为组合框、搜索框或文本框的预期值提供的预测,并指定如果生成了预测,则如何呈现这些预测。

一个包含以下值之一的字符串

"inline"

当用户正在输入时,建议一种完成所提供输入的方法的文本可能会动态插入插入符号之后。

"list"

当用户正在输入时,可能显示一个包含可以完成所提供输入的值集合的元素。

"both"

当用户正在输入时,可能显示一个包含可以完成所提供输入的值集合的元素。如果显示,则会自动选择集合中的一个值,并且在输入中插入符号之后会显示完成自动选择的值所需的文本。

"none"

当用户输入时,没有显示任何自动建议尝试预测用户如何完成输入。

示例

在这个例子中,ID 为 animal 的元素上的 aria-autocomplete 属性被设置为 "inline"。使用 ariaAutoComplete,我们将值更新为 "list",这是调用 listbox 弹出窗口的组合框的预期值。

html
<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>
js
let el = document.getElementById("animal");
console.log(el.ariaAutoComplete); // inline
el.ariaAutoComplete = "list";
console.log(el.ariaAutoComplete); // list

规范

规范
无障碍富互联网应用 (WAI-ARIA)
# dom-ariamixin-ariaautocomplete

浏览器兼容性

BCD 表格仅在浏览器中加载