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

Question

如果焦点不在搜索输入上，我会尝试隐藏搜索结果。我可以通过在 .keyup() 函数之后使用 .blur() 轻松做到这一点。我的问题是，当用户单击搜索结果时......它仍然隐藏。因此，我想这样做，如果用户从文本输入中删除焦点并且用户不关注搜索结果，则仅隐藏 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

希望这对你有帮助