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

Question

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

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

我面临的问题是:

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

1) 所以第一个结果本身将显示突出显示的 css。当我悬停或使用键导航时，只有高亮 css 应该出现，我该如何实现。

2) 所以现在如果我将鼠标悬停在第二个或结果上，则突出显示 css 将显示在第二个或第三个中，但第一个结果也会显示 css。我只想要 higlight css 一次只有一个。 (在 youtube 搜索中有相同的功能)

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

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

感谢任何帮助!如果您有任何疑问，请告诉我

Answer 1

考虑到我们在此沙箱中更新的代码:https://codesandbox.io/s/react-codesandbox-5fvk9

您真正需要的只是一个 onMouseEnter() 事件处理程序来让一切正常工作。

处理程序

  handleMouseEnter = index => {
    this.setState({
      cursor: index,
    })
  }

标记

{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>
     )
})}

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