Question

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

当您输入任何内容时，我会看到一个搜索框，它将显示搜索结果（如下拉列表），例如，当您在youtube中搜索时，您可以在下面看到相同的结果，

我面临的问题是：

假设我键入“ a”，现在您将能够在搜索结果div中滚动的情况下看到总共6条结果。

1）因此，第一个结果本身将显示突出显示的CSS。当我将鼠标悬停或使用键导航时，应该出现higlight css。

2）现在，如果我将鼠标悬停在第二个或结果上，高亮css将显示在第二个或第三个中，但是第一个结果也将显示css。我只希望一次只使用高亮CSS。（YouTube搜索具有相同的功能）

3）现在仅可见三个元素，您需要滚动其余三个元素，当我浏览箭头键时，滚动没有发生，如何使用scrollIntoView API来实现这一点

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

使用此选项，一次只能将鼠标悬停或向下箭头/向上箭头中的一项生效。因此，只会突出显示一个列表项。

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

1 个答案:

处理程序

标记