基于点击元素的模糊异常

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

});

基于点击元素的模糊异常

Blur exception based on clicked element

javascript

jquery

focusout