javascript - 什么 Javascript 事件会导致具有列表属性的输入呈现其列表？

Question

如果我有一个像这样的输入元素:

<input list='foo'>
<datalist id = 'foo'>some options</datalist>

是否可以使用 JavaScript 事件来延迟渲染列表，直到输入 x 个字符以及其他类似的微调操作？

我似乎无法阻止此列表的弹出。我找到了有关 native 行为的文档，但不幸的是我无法找到有关此特定问题的任何内容。

Answer 1

我认为您能够做的最接近的事情(无需编写自己的自定义组件)是根据输入中值的长度对列表进行属性和取消属性。

但这给出了好坏参半的结果。有时，在列表被归因后，您必须对输入进行散焦并重新聚焦才能开始显示。 Firefox 的行为方式是这样，但 Chrome 会使用react，无论您是否将焦点放在 <input> 上。或不。

const foo = document.getElementById("foo");

foo.addEventListener("input", e => {
  const hasList = foo.hasAttribute("list");
  const shouldHaveList = foo.value.length > 2;

  if (shouldHaveList && !hasList) foo.setAttribute("list", "list");
  if (!shouldHaveList && hasList) foo.removeAttribute("list");

});

<input id="foo">
<datalist id="list">
  <option value="bobby">
  <option value="sharron">
  <option value="susan">
  <option value="michael">
  <option value="gregory">
  <option value="steve">
</datalist>