IT技术 - 搜索结果使用 reactjs 突出显示结果 - 吾爱随笔录

我试图获得像 YouTube 这样的搜索结果。只是尝试，但我遇到了一些问题。我已经在 codeandbox here 中制作了工作应用程序。

当您输入任何内容时，我有一个搜索框，它会显示搜索结果，例如下拉列表，例如，当您在 youtube 中搜索时，您将能够看到下面的结果，同样的事情/

我面临的问题是：

假设我输入“a”，现在您将能够在搜索结果 div 中看到总共 6 个带有滚动条的结果。

1) 所以第一个结果本身将显示突出显示的 css。当我悬停或使用键导航时，只有突出显示的 css 应该出现我怎样才能做到这一点。

2）所以现在如果我将鼠标悬停在第二个或结果突出显示 css 将显示在第二个或第三个但第一个结果也将显示 css。我只想要一次高亮 css。（youtube搜索中有相同的功能）

3）现在只有三个元素是可见的，剩下的三个是你需要滚动的，当我通过箭头键导航时，滚动没有发生我怎么能用scrollIntoView API来实现这个

4) 在 6 个结果中，搜索字符串是“a”，我怎样才能使该字符串变强以使其保持突出显示，因此无论您搜索什么，都应突出显示

任何帮助表示赞赏！如果您有任何疑问，请告诉我

标记

{searchResults.map((item, index) => { return ( <li ref={ref => (this.itemRefs[index] = ref)} onClick={() => this.goToItem(index)} className={cursor === index ? 'active' : null} onMouseEnter={() => this.handleMouseEnter(index)} > <label className="first-lb">{item.id}</label> <label className="second-lb">{item.name}</label> <label className="third-lb">{item.address}</label> </li> ) })}

这样，一次只有悬停或向下箭头/向上箭头之一生效。所以只有一个列表项会被突出显示。

搜索结果使用 reactjs 突出显示结果

处理程序

标记