视觉上从一个 html 元素移动到另一个 - Javascript

Question

出于上下文考虑，这是一项学校作业，我在输入字段中键入文本，然后从数据库中获取选项，这些选项建议与用户所写字母具有相同字母的项目。它附有简单的名称数据库。

我收到 AJAX 响应并将其放入名称数组。我在搜索字段下方有 ul 元素，名称来自我在这个 ul 列表中填充为 li 项的响应。这一切都有效。我需要的是按向上/向下箭头键从输入字段移动到那些列表项时的功能。

在我的第一次尝试中，我选择制作数据列表而不是 ul，并且我用选项元素填充了数据列表，这很有效，因为我可以从输入选项移动到数据列表选项。然而，在未来的道路上，我需要将事件侦听器附加到不可能的选项。因此我然后去了 ul / li 版本。我似乎无法弄清楚如何从输入元素切换到 li 项目。

我尝试过的：

我在输入字段上设置了 eventlistener keydown 以检查是否按下了 DownArrow。这行得通。然后我尝试了以下（名称是 ul 的 id）。

let list = document.getElementById('names');
list.firstChild.focus();
list.firstChild.select();

这里我收到错误 "list.firstChild.select is not a function" 并且我卡住了。

Answer 1

判断你的代码，你得到错误 list.firstChild.select is not a function 的原因是因为你试图在没有它的元素上使用 focus() 方法。基本上，您可以在 <input /> 元素上使用它，但它不适用于 <li> 项目。

根据DOM level 2，只有以下元素有focus方法：

Answer 2

为了 element.focus() 在列表项上工作（默认情况下它不会），您必须将 tabindex 属性添加到列表项。

例如：

listitem.setAttribute('tabindex',1);

Visually move from one html element to another - Javascript