Question

在我看来，我有以下内容：

           <input placeholder="Enter a subject here" data-bind="hasFocus: showDropdown, valueUpdate: 'afterkeydown' />
           <div class="dropdown" data-bind="visible: showDropdown">

这个想法是，当输入具有焦点时，会显示一个下拉列表，用户可以键入以过滤该下拉列表中显示的项目。

当我单击下拉列表中的某个项目时，输入会失去焦点，并且在处理单击事件之前关闭下拉列表，因此下拉列表中的任何锚点都不会起作用。

我可以绑定一些计算的observable，当输入失去焦点并且点击的元素不是下拉列表时隐藏下拉列表，但我想看看是否有一个更优雅的方法，淘汰赛提供 - 可能通过添加一些在输入失败输入焦点事件之前的那种延迟？我有什么选择？

Answer 1

这是我处理类似目的的列表 -

http://jsfiddle.net/HVUHq/

<div data-bind="event: { mouseover: showDropdown, mouseout: hideDropdown }">
    <input placeholder="Enter a subject here" data-bind="valueUpdate: 'afterkeydown'" />
    <ul data-bind="foreach: items, visible: showing">
        <li data-bind="text: Name"></li>
    </ul>
</div>

当鼠标进入或退出时，我使用事件绑定来显示/隐藏列表。你可以按照这个按照你想要它的方式来隐藏列表和何时显示它，但一般的想法是使用内置于Knockout的事件处理程序。

输入具有焦点时显示下拉列表。如何在输入失去焦点时保持下拉列表打开？

1 个答案: