如何以编程方式触发自动完成数据列表

Question

我使用以下(简化)代码。当按钮被单击时，输入字段得到聚焦，然而，只有当我手动单击输入字段时，自动完成列表才会显示…

const $input = document.getElementById('input');
const $button = document.getElementById('button');
$button.onclick = function() {
$input.focus();
//$input.click(); //doesn't work either
}

<input list="list" id="input">
<datalist id="list">
<option>List item</option>
</datalist>
<button id="button">show list</button>

Answer 1

据我所知，没有真正的本地方法可以做到这一点。有一些简单的方法可以控制这个功能(这通常对ADA来说很糟糕)。但是你要做的是创建一个自定义版本，在那里你有完整的DOM控制，然后自动触发打开。

有一个叫做showPicker()的新方法，它可以做你想做的事情，唯一的问题是对它的支持有限。Chrome 99+， Safari 16+， &火狐101 + .

我的建议是在try, catch中使用它，然后添加有用的屏幕阅读器描述符。

---

*请注意，showPicker()不工作在这里，但它从一个本地脚本。有一个错误的showPicker() called from cross-origin iframe.堆栈溢出代码的东西。

1. 显示浏览器选择器
2. MDN showPicker ()
<
3. showPicker()支持/gh>

const $input = document.getElementById('input');
const $button = document.getElementById('button');
$button.onclick = function() {
$input.focus();
//$input.click(); //doesn't work either
try {
$input.showPicker();
} catch (error) {
console.error(error);
}
}

<input list="list" id="input">
<datalist id="list">
<option>List item</option>
</datalist>
<button id="button">show list</button>

Answer 2

<datalist>元素的默认可视化仅在您在输入字段中键入时才工作。但是您可以通过更改<datalist>元素的CSS样式来提供自己的可视化。在最简单的变体中，您只需将其display属性从none更改为block:

document.querySelector("datalist").addEventListener("click", function(event) {
if (event.target.nodeName === "OPTION")
document.querySelector("input").value = event.target.textContent;
}, true);

datalist.preview {
display: block;
}
input:focus~datalist {
display: none;
}

<input list="list" id="input">
<button onclick="document.querySelector('datalist').classList.add('preview')">show list</button>
<datalist id="list">
<option>List item</option>
</datalist>

这对你有帮助吗?