Question

Html（如果没有结果 - 示例）：

WARN  [2016-12-08 09:32:04,975] io.dropwizard.setup.AdminEnvironment:
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!    THIS APPLICATION HAS NO HEALTHCHECKS. THIS MEANS YOU WILL NEVER KNOW      !
!     IF IT DIES IN PRODUCTION, WHICH MEANS YOU WILL NEVER KNOW IF YOU'RE      !
!    LETTING YOUR USERS DOWN. YOU SHOULD ADD A HEALTHCHECK FOR EACH OF YOUR    !
!         APPLICATION'S DEPENDENCIES WHICH FULLY (BUT LIGHTLY) TESTS IT.       !
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
INFO  [2016-12-08 09:32:04,984] org.eclipse.jetty.server.handler.ContextHandler: Started i.d.j.MutableServletContextHandler@3e48e859{/admin,null,AVAILABLE}
INFO  [2016-12-08 09:32:05,019] org.eclipse.jetty.server.AbstractConnector: Started DropwizardAppApplication@2cac4385{HTTP/1.1,[http/1.1]}{0.0.0.0:9999}
INFO  [2016-12-08 09:32:05,020] org.eclipse.jetty.server.Server: Started @2200ms

Html（带结果 - 示例）：

<div id="fixedsearch"></div>

jquery的：

<div id="fixedsearch">
 <div>
  <h3>Title</h3>
  <img src="/imagesource.jpg">    
 </div>
</div>

我需要的是：

1）如果数据不为空（并且#fixedsearch中存在div），请执行一个平滑的动画，如slidedown（），以显示#fixedsearch内的结果，

2）如果数据为null，请执行一个平滑的动画，例如slideup（），以平滑地隐藏div。

这是一般性的想法，但我无法用这个jquery代码完成。

Answer 1

你的条件错了。如果要测试是否存在要输出的数据，则应该测试data == ''，而不是测试data.length > 0。

success:function(data){
      $('#fixedsearch').html(data);    
      if(data.length > 0){
        $('#fixedsearch').slideUp();
      }else{
        $('#fixedsearch').slideDown();
      }    
    }

Answer 2

尝试使用stop()添加一些超时延迟以及true来清除触发多个keyup事件时触发的待处理动画队列。

jQuery(document).ready(function() {
  $('#searchinput').on('keyup', function() {
    //when no data from server
    data = $(this).val();
    if (data.length) {
      $('#fixedsearch').stop(true, true).slideUp(1000, function(){
         //you can do some process
      });
    } else {
      $('#fixedsearch').stop(true, true).slideDown(1000, function(){
         // you can do some process 
      });
    }
    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchinput" />
<div id="fixedsearch">
  <div>
    <h3>Title</h3>
    <img src="/imagesource.jpg">
  </div>
</div>

Answer 3

您应该检查数据的长度：

找到标签并检查它是否返回零长度。如果是，则没有返回数据。

 $('#searchinput').on('keyup', function(){
      $value=$(this).val();
      $.ajax({
        type: 'get',
        url: '{{URL::to('ajaxsearch')}}',
        data: {'states':decodeURIComponent($value)},
        success:function(data){
          var dataHtml = $('#fixedsearch',data).find('div').length;
          $('#fixedsearch').html($('#fixedsearch',data).html());    
          if(dataHtml == 0){
            $('#fixedsearch').slideUp();
          }else{
            $('#fixedsearch').slideDown();
          }    
        }
      });
    });

Answer 4

使用 .html（）。length

将数据附加到div后，您可以检查内容长度。您可以在div上使用.html().length来检查。在成功回调中使用此代码

   success:function(data){
      var $fixedSearch = $('#fixedsearch'); // hold the object in a variable since you are using it multiple times, Just a performance concern
      $fixedSearch.html(data);    
      if($fixedSearch.html().length == 0){  // check if the contents exist or not
        $fixedSearch.slideUp();
      }else{
        $fixedSearch.slideDown();
      }    
    }

Answer 5

好的，这是您的代码中的问题......

我认为你缺少关于slideDown（）函数的重要属性，我知道 -

slideDown（）适用于使用jQuery方法隐藏的元素 CSS中显示：无（但不可见：隐藏）;如果您的div没有display:none之类的CSS，则slideDown()无效。

和slideUp()将在显示的元素中工作，但你必须在其中回调函数。我认为你应该有如下代码 -

$('#searchinput').on('keyup', function(){
  $value=$(this).val();
  $.ajax({
    type: 'get',
    url: '{{URL::to('ajaxsearch')}}',
    data: {'states':decodeURIComponent($value)},
    success:function(data){
      // $('#fixedsearch').html(data);- this will set html to recent and if data is empty then you div  with id fixedsearch automatically hidden
      $('#fixedsearch').html(data);    
      if(data == ''){
        $('#fixedsearch').slideUp("slow",function(){
              $('#fixedsearch').html(data);
        });
      }else{
        // this will hide your div abrupty
        $('#fixedsearch').css('display':'none');
        // now set div with you new html; hope you are getting response in html 
        $('#fixedsearch').html(data);
        $('#fixedsearch').slideDown();
      }    
    }
  });
});

Answer 6

经过多次尝试，我看到了高度问题。

 $('#searchinput').on('keyup', function(){
      $value=$(this).val();
      $.ajax({
        type: 'get',
        url: '{{URL::to('ajaxsearch')}}',
        data: {'states':decodeURIComponent($value)},
        success:function(data){
          $('#fixedsearch').html(data); 
          $('#fixedsearch').css({"height": "296px"});
          if(data != ""){
            $('#fixedsearch').slideDown();
          }else{
            $('#fixedsearch').slideUp();
          }          
        }
      });
    });

现在我需要的是在div不为空时动态获取高度。现在其他一切都很完美。感谢您的支持。

jquery - 在ajax值为null之后make div slideup

6 个答案: