未调用onclick（search-box-with-suggestions-dropdown）

Question

我正在尝试使用此代码： search with suggestions

我要改变的一件事就是我要添加`onclick =＆＃34; alert（＆＃39; test＆＃39;）;＆＃34;在每个

    <li><a href="index.html" onclick="alert('test');">Search Result #1<br /><span>Description</span></a></li>`

使用搜索制作列表。我需要更多的是使其自动完成输入，而其中一个建议被阻止。我不知道为什么它不起作用，onclick没有被调用。我发现如果我注释掉这一行：

    .search .results {
        //display: none;
    . . .

然后点击工作正常，但当然会在搜索开始之前显示结果...

你能帮我解决这个问题，还是指出另一个我可以依赖的样本？

带警报的示例： https://codepen.io/anon/pen/vZxrxN

感谢您的任何建议！

Answer 1

这里的问题是您正在显示关注输入的项目。单击时焦点将丢失，因此列表将被隐藏。

第一个选项是使用onmousedown而不是onclick，并保持代码不变。 mousedown事件在焦点丢失之前触发。

您的第二个选择是更新规则，以便在悬停时菜单不会隐藏。有了这个，你可以保持点击。

.search input:focus + .results,
.search .results:hover { 
    display: block 
}