时间戳

首页 > 解决方案 > 在焦点上显示 div，但在单击页面上的任意位置时关闭

jquery - 在焦点上显示 div，但在单击页面上的任意位置时关闭

问题描述

我的搜索框下方出现了一个 div。虽然我无法单击出现在焦点上的 div 中的链接 - 因为搜索表单不再“集中”。

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

$("#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>

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

标签： jquery

解决方案

可能不是完美的解决方案，但它有效。

$("#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>

推荐阅读