javascript - 基于点击元素的模糊异常

Question

这个怎么运作

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

问题

当我单击搜索结果容器时出现问题。输入字段因搜索结果容器隐藏的结果而变得模糊。

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

HTML

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

jQuery

$('.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').fadeOut(10);

   // Other code

});

Answer 1

我通过在模糊期间添加淡出延迟来解决我的问题。这样我就可以单击容器内的按钮。

$('.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

});

Answer 2

你不一定需要 JS / jQuery。
尝试使用required属性和 CSS:valid来实现所需的

.searchbox {
  position: relative;
}

.searchbox .search-results {
  position: absolute;
  top: 100%;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
  background: #eee;
  padding: 1rem;
}

.searchbox .input:valid + .search-results {
  visibility: visible;
  opacity: 1;
}

<div class="searchbox">
  <input class="input" required>
  <div class="search-results">
    <p>Register to use this feature</p>
    <button>JOIN NOW</button>
  </div>
</div>

<p>Lorem ipsum...</p>

如果您更喜欢 jQuery：

$(".input").on({
  "input focus": function() {
    $(this).closest(".searchbox").toggleClass("showInfo", !!$.trim(this.value));
  },
  "blur": function() {
    $(this).closest(".searchbox").removeClass("showInfo");
  }
});

.searchbox {
  position: relative;
}

.searchbox .search-results {
  position: absolute;
  top: 100%;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
  background: #eee;
  padding: 1rem;
}

.search-results:hover,
.searchbox.showInfo .search-results {
  visibility: visible;
  opacity: 1;
}

<div class="searchbox">
  <input class="input">
  <div class="search-results">
    <p>Register to use this feature</p>
    <button>JOIN NOW</button>
  </div>
</div>

<p>Lorem ipsum...</p>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

起初可能看起来并不明显，但:hover有助于在与内容交互时保持元素可见。