javascript - 阻止 split 失去焦点

Question

我有一个自动完成功能附加到带有 id 关键字的输入标签。自动完成的结果在带有 id results 的分区中可见，并且在带有 class item 的分区中的每个结果项中可见。 这是 HTML 标记:

<input name='institute' type="text" placeholder="Start typing.."id="keyword">
<div id="results">
    <div class="item"><p>Item 1</p></div>
    <div class="item"><p>Item 2</p></div>
    <div class="item"><p>Item 3</p></div>
</div>

除法结果有一个固定的高度。这是 CSS:

width:80%;
height: 200px;
overflow-y: auto;

这是与我的问题相关的 jquery 部分

$("#keyword").blur(function() {
    $("#results").fadeOut(500);
  })
  .focus(function() {
    $("#results").show();
  });

现在，只要结果的高度超过 200px，就会出现问题。我得到一个滚动条，但每当我点击滚动条时，输入标签关键字就会失去焦点，除法结果就会消失。我想在使用滚动条时保留除法结果，仅在选择一个元素后才将其淡化。我该如何解决？

Answer 1

有趣的问题，也是在 Chrome 和 IE 中工作的真正挑战:

var canBlur= true;

$('#results')
  .mousedown(function(event) {
    canBlur= event.target.id !== 'results';
  })

$(document)
  .mousemove(function() {
    if(!canBlur) {
      $('#keyword').focus();
    }
    canBlur= true;
  });

$('#keyword')
  .blur(function(event) {
    if(canBlur) {
      $('#results').fadeOut(500);
    }
  })
  .focus(function() {
    $('#results').fadeIn(0);
  })

Fiddle