在焦点上显示div,但单击页面上的任何位置时关闭

Question

我有一个div显示在我的搜索框下面。虽然我不能点击div中出现在焦点上的链接--因为搜索表单不再是“焦点”。

我希望当我在输入框中键入时显示div并使链接可点击，但当我点击其他任何地方时隐藏div。

null

$("#searchInput").focusin(function() {
        $("#searchResults").show();
    }).focusout(function () {
        $("#searchResults").hide();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form class="d-flex" action="/search">
  <input id="searchInput" class="form-control me-2 border-0 search-box" type="text" name="q" placeholder="Search" autocomplete="off">
</form>
<div class="result_box">
  <ul class="list-group" id="searchResults">
  <a href="google.com" target="_blank">Test Search Result</a>
  </ul>
</div>

null

实现此功能的最佳方法是什么？

Answer 1

也许不是完美的解决方案，但它起作用了。

null

$("#searchInput").focusin(function() {
        $("#searchResults").show();
    });

$(document).on('click', function(event)
{
    let target = event.target;
    if(!$(target).hasClass("link") && !$(target).hasClass("search-box"))
         $("#searchResults").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form class="d-flex" action="/search">
  <input id="searchInput" class="form-control me-2 border-0 search-box" type="text" name="q" placeholder="Search" autocomplete="off">
</form>
<div class="result_box">
  <ul class="list-group" id="searchResults">
  <a class = "link" href="google.com" target="_blank">Test Search Result</a>
  </ul>
</div>