淡入搜索结果

Question

我希望让搜索栏中的搜索结果淡入。我曾尝试将fadeIn（）添加到函数中，但是仍然无法正常工作。如果有人可以提供任何帮助，将不胜感激。

我希望让搜索栏中的搜索结果淡入。我曾尝试将fadeIn（）添加到函数中，但是仍然无法正常工作。如果有人可以提供任何帮助，将不胜感激。

header_search.liquid-

{%- if settings.basel_search_widget != 'disable' -%}
<div class="search-button basel-search-{{settings.basel_search_widget}}">
   <a href="#"><i class="fa fa-search"></i></a>
   <div class="basel-search-wrapper">
      <div class="basel-search-inner">
         <span class="basel-close-search">{{ 'general.search.close_search' | t }}</span>
         <form role="search" method="get" class="searchform{%- if settings.ajax_search %} basel-ajax-search{%- endif -%}" action="/search">
            <div>
               <label class="screen-reader-text"></label>
               <input type="text" placeholder="{{ 'general.search.placeholder' | t }}" value="{{ search.terms | escape }}" name="q" autocomplete="off">
               {%- if settings.only_search_products -%}<input type="hidden" name="type" value="product" />{%- endif -%}
               <button type="submit">{{ 'general.search.submit' | t }}</button>
            </div>
         </form>
         <div class="search-results-wrapper">
            <div class="basel-search-results">
              <div class="autocomplete-wrapper">

               <div class="autocomplete-suggestions" style="position: absolute; max-height: 300px; z-index: 9999;"></div>
     
                
            </div>
           </div>
         </div>
      </div>
   </div>
</div>
{%- endif -%}

functions.js-

  *-------------------------------------------------------------------------------------------------------------------------------------------
             * Ajax Search for products
             *-------------------------------------------------------------------------------------------------------------------------------------------
             */
             ajaxSearch: function() {
               if( theme.basel_settings.ajax_search == 'no' || theme.basel_settings.header_search_category == 'yes' ) return;
               var currentAjaxRequest = null,
                  search_form = $('form.basel-ajax-search');
               search_form.each(function() {
                  var input = $(this).find('input[name="q"]');
                  input.attr('autocomplete', 'off').bind('keyup', function() {
                    $('.autocomplete-suggestions').html('').hide();
                     var term = $(this).val(),
                        form = $(this).closest('form');
                     if (term.trim() == '') {
                         $('.autocomplete-suggestions').hide();
                     }else{
                        if( theme.basel_settings.ajax_search_product == 'yes' ) {
                           var searchURL = '/search?type=product&q=' + term;
                        } else {
                           var searchURL = '/search?q=' + term;
                        }
                        form.addClass('search-loading');
                        if (currentAjaxRequest != null) currentAjaxRequest.abort();
                        currentAjaxRequest = jQuery.get(searchURL + '&view=json', function(data) {
                           $('.autocomplete-suggestions').html(data);
                           setTimeout(function() {
                             form.removeClass('search-loading');    
                           }, 300);   
                        });
                       setTimeout(function() {
                         baselThemeModule.gl_currency();
                         $('.autocomplete-suggestions').fadeIn(2500);    
                       }, 1500); 
                     }
                  });
               });
               $('body').bind('click', function(){
                  $('.autocomplete-suggestions').hide();
                  $('form#searchform').removeClass('search-loading');
              });
            },
            categorysearch: function() {
                if( theme.basel_settings.header_search_category == 'no' ) return;
               var currentAjaxRequest = null,
                  categories_form = $('form.has-categories-dropdown'),
                  input = categories_form.find('input[name="q"]');
               input.attr('autocomplete', 'off').bind('keyup', function() {
                 $('.autocomplete-suggestions').html('').hide();
                   var term = input.val(), categories = $('#product_cat').val();
                  var searchURL = '/search/collections/'+categories+'?type=product&q=' + term;
                  if (term.trim() == '') {
                     $('.autocomplete-suggestions').hide();
                  }else{
                     categories_form.addClass('search-loading');
                     if (currentAjaxRequest != null) currentAjaxRequest.abort();
                     currentAjaxRequest = jQuery.get(searchURL + '&view=json', function(data) {
                        $('.autocomplete-suggestions').html(data);
                        setTimeout(function() {
                          categories_form.removeClass('search-loading');    
                        }, 300);   
                     });
                     setTimeout(function() {
                         baselThemeModule.gl_currency();
                         $('.autocomplete-suggestions').fadeIn(2500);    
                     }, 1500); 
                  }
               });
               $('body').bind('click', function(){
                  $('.autocomplete-suggestions').hide();
                  $('form#searchform').removeClass('search-loading');
               });
            },

            /**

Answer 1

如果要淡入淡出结果，则需要将none的显示属性分配给目标元素（在您的情况下，为自动完成建议框）。像这样：

.autocomplete-suggestions {
  display: none;
}

这应该可以解决问题。 Here's a working example

有关fadeIn here的更多信息，更多信息>