Javascript 基于单击元素的模糊异常

它的工作原理

我正在构建一个演示搜索框，当输入字段不为空时，搜索结果将显示在该框中。模糊搜索结果时，容器将隐藏

问题

单击“搜索结果”容器时出现问题。输入字段与搜索结果容器隐藏的结果模糊

如何使其工作，以便在单击搜索结果容器（或其中的元素）时不会隐藏该容器

HTML

<div class="searchbox">
   <input class="input">
   <div class="search-results">
      // Results
   </div>
</div><!--End .searchbox-->

---

您不一定需要JS/jQuery。
尝试使用

required

属性和CSS的

：valid

，以达到所需的效果

.searchbox{
位置：相对位置；
}
.searchbox.search结果{
位置：绝对位置；
最高：100%；
可见性：隐藏；
不透明度：0；
过渡：0.3s；
背景：#eee；
填充：1rem；
}
.searchbox。输入：有效+。搜索结果{
能见度：可见；
不透明度：1；
}

注册以使用此功能

现在加入
Lorem ipsum…

我通过在模糊过程中添加淡出延迟来修复我的问题。这样我就可以点击容器内的按钮

$('.searchfield .input').focusin(function() {

   // When value is not empty show search results
   if ($(this).val() !== '') {
      $('.searchbox .search-results').fadeIn(10);
   }

   // Other code

}).focusout(function() {

   // Hide search results
   $('.searchbox .search-results').delay(300).fadeOut(10);

   // Other code

});

---

输入没有子元素，因此

focus

。（而不是

focusin

）@RokoC.Buljan谢谢，已更改。但这并不能解决问题，对吗？不，这不是你问题的解决方案，只是一个评论，一天的提示：）。@RokoC.Buljan谢谢！谢谢您的回答，但我需要一个jQuery解决方案，因为在这个过程中我有其他的cpde运行。@Robbert添加了一个示例。

$('.searchfield .input').focusin(function() {

   // When value is not empty show search results
   if ($(this).val() !== '') {
      $('.searchbox .search-results').fadeIn(10);
   }

   // Other code

}).focusout(function() {

   // Hide search results
   $('.searchbox .search-results').delay(300).fadeOut(10);

   // Other code

});