Javascript 使用箭头键导航下拉列表结果，同时保持对文本框的关注

我正在尝试在React中实现一个可类型化的下拉组件。我已经设法实现了一个简单的下拉列表，根据用户在下拉列表文本框中键入的内容向用户显示结果，并且结果在键入时不断更新

现在，我希望用户能够使用上下箭头键浏览下拉结果。但是我想我需要同时关注两个元素？一个用于可键入的文本框，这样用户可以继续键入，另一个用于搜索结果，这样用户可以使用键在它们之间导航我知道一次只能关注一个元素，那么如何实现这一点

作为我所要求的示例，请参见此可类型下拉列表的快照：

如您所见，这里的焦点在文本框上，但它似乎也在高亮显示的元素上，因此上下键可以对其起作用。我从项目中拍摄了这张照片。你猜他们是怎么做到的

我的普通下拉列表代码目前如下所示：

let dropdownOptions = [];
for (let i = 0; i < searchResults.length; i++) {
    dropdownOptions.push(
        <div key={i} tabIndex={"0"}
             onMouseDown={() => {
                    // code to set the dropdown's selected value when
                    // a dropdown option is clicked, then hide the dropdown
                }}
             onKeyPress={(e) => {
                    // this is where the code to navigate between 
                    // results using arrow keys will go.
                }}
        >
             {searchResults[i].value}
        </div>);
}

let-dropdownpoptions=[]；
for（设i=0；i{
//这就是要在其中导航的代码
//使用箭头键的结果将消失。
}}
>
{searchResults[i].value}
);
}

这是包含下拉列表搜索结果的

数组。这些div构成在文本框中键入内容时显示给用户的选项

---

那么，将注意力集中在多个元素上是正确的做法吗？如果没有，我还能做些什么来实现这一点？

作为一个选项，您不能将焦点移动到任何地方，只需使用突出显示的项目值更改当前输入值即可。因此，如果用户开始向上/向下移动，您会记住在输入中键入的内容，并将输入值更改为所选项目值。当列表中的最后一项达到-restore-typed值时。您还应该记住选中的项目索引以突出显示它。@MykolaPrymak听起来确实可行。我认为您建议在用户希望使用上/下键导航时，将焦点移到结果，然后在选择值后，将焦点移回文本框。我以后会试试的，谢谢！您可以在此处看到thrivial实现—唯一未实现的事情—单击外部/选择项/按enter按钮应关闭下拉列表。不，不移动焦点，只突出显示所选项。如果移动焦点，则无法在输入字段中键入任何内容。正如您在屏幕截图（输入中的焦点）上所看到的，您只需在下拉列表中选择具有某些样式的项目。