下拉顯示當輸入具有焦點。輸入失去焦點時如何保持下拉菜單打開？

Question

我認爲我有以下：

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

的想法是，當輸入具有焦點，下拉顯示，並且用戶可以輸入以過濾在下拉顯示的項目。

發生了什麼事是，當我在下拉列表中單擊一個項目，輸入失去焦點，然後單擊事件被處理之前下拉關閉，所以在下拉列表中的任何錨行不通。

我可以綁定某種計算觀察值，當輸入失去焦點時隱藏下拉菜單，點擊的元素不是下拉菜單，但我想看看是否有更精美的淘汰賽方法 - 可能通過添加在丟失輸入焦點事件被觸發之前的某種延遲？我有什麼選擇？

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> 

我用的是事件綁定顯示/隱藏列表中，當鼠標在未來或縮小。你可以按摩這個工作，你希望它在當隱藏表格時，VS，以顯示它的方式，但一般的概念是使用內置到淘汰賽的事件處理程序。