我有一个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
实现此功能的最佳方法是什么？
也许不是完美的解决方案，但它起作用了。
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>