Question

如果焦点不在搜索输入上，我试图隐藏搜索结果。我可以在.blur()函数后使用.keyup()轻松完成此操作。我的问题是当用户点击搜索结果时......它仍然隐藏。所以，如果用户从文本输入中删除焦点并且用户不关注搜索结果，那么我想这样做，那么只隐藏div

HTML：

<form role="search" autocomplete="off">
  <div>
    <input id="searchInput" type="text" placeholder="Search">
  </div>
  <div class="search_main">
    <div id="sresult" tabindex="0"></div>
  </div>
</form>

jQuery的：

$("#searchInput").keyup(function(e) {
  var q = $(this).val();
  if (q !== undefined && q.length > 0) {
  $("#sresult").show(150);
    $("#sresult").html("No results");
  } else {
    $("#sresult").hide(150);
  }
}).blur(function(e) {
  $("#sresult").hide(150);
});

JSFiddle Demo

Answer 1

使用on事件处理程序

简单地添加多个事件

element.on('event1 event2 etc...')

您的活动将是这样的

$("#searchInput").on('keyup click',function(e) {
    var q = $(this).val();
    if (q !== undefined && q.length > 0) {
        $("#sresult").show(150);
        $("#sresult").html("No results");
    } else {
        $("#sresult").hide(150);
    }
}).blur(function(e) {
    $("#sresult").hide(150);
});

这样，通过时间元素单击或键入，将执行显示结果的函数

DEMO

希望这能帮到你

如果焦点不在输入上，则隐藏搜索结果

1 个答案: