我试图获得像 YouTube 这样的搜索结果。只是尝试,但我遇到了一些问题。我已经在codesandbox中制作了工作应用程序here https://codesandbox.io/s/react-codesandbox-kyd4g.
我有一个搜索框,当您输入任何内容时,它会显示搜索结果,例如下拉菜单,例如,当您在 YouTube 中搜索时,您将能够看到下面的结果,同样的事情/
我面临的问题是:
假设我输入“a”,现在您将能够在滚动的搜索结果 div 中看到总共 6 个结果。
1)所以第一个结果本身将显示突出显示的CSS。当我悬停或使用按键导航时,只有高亮CSS应该出现,我怎样才能实现这一点。
2)所以现在如果我将鼠标悬停在第二个或结果突出显示CSS将显示在第二个或第三个,但第一个结果也会显示CSS。我只想要一次只有一个高亮CSS。 (youtube 搜索中也有同样的功能)
3)现在只有三个元素可见,其余三个元素需要滚动,当我通过箭头键导航时,滚动没有发生,我怎样才能实现这一点滚动到视图 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView API
4)在 6 个结果中,搜索字符串是“a”,我怎样才能使该字符串变得强大,使其保持突出显示,这样无论您搜索什么,它都应该突出显示
任何帮助表示赞赏!如果您有任何疑问,请告诉我
考虑到我们在此沙箱中更新的代码:https://codesandbox.io/s/react-codesandbox-5fvk9 https://codesandbox.io/s/react-codesandbox-5fvk9
您真正需要的是onMouseEnter()
事件处理程序让一切正常工作。
Handler
handleMouseEnter = index => {
this.setState({
cursor: index,
})
}
Markup
{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>
)
})}
这样,一次只有悬停或向下箭头/向上箭头之一生效。因此只有一个列表项会被突出显示。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)