基于单击元素的模糊异常

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

您不一定需要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有助于在与元素的内容进行交互时使元素可见。

Answer 2

我通过在模糊过程中增加淡入淡出的延迟来解决问题。这样，我可以单击容器内的按钮。

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

});