Question

我有一个自动完成功能附加到带有id关键字的输入标记。自动完成的结果在具有id结果的分区中可见，并且每个结果项在具有类项的分区内。这是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

Answer 2

当用户滚动时，他们按住滚动条并拖动。你应该这样做，如果用户的鼠标在div上，div不会消失。你应该只让input和div失去焦点。

Answer 3

使用按键事件而不是像这样的模糊

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

阻止分裂失去焦点

3 个答案: