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

});