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

Question

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

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

在我第一次尝试时，我选择制作 datalist 而不是 ul 并用选项元素填充 datalist，这很好，因为我可以从输入移动到 datalist 选项。 然而，再往前走，我需要将事件侦听器附加到不可能的选项。 因此，我然后去了 ul / li 版本。 我似乎无法弄清楚如何从输入元素切换到 li 项目。

我尝试过的：

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

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

在这里，我收到错误消息“list.firstChild.select 不是函数”并且我卡住了。

链接到当前版本

Answer 1

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

根据DOM 级别 2 ，只有以下元素具有focus方法：

• HTML输入元素
• HTML选择元素
• HTMLTextAreaElement
• HTMLAnchorElement
• HTML区域元素

Answer 2

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

例如：

listitem .setAttribute('tabindex',1);