jQuery -当用户在输入中输入某物时，从另一个div下来回滑动div。

Question

当用户在div中键入某些内容时，我想从另一个div下面向下滑动一个div。

我尝试过这，但当用户在输入框中输入某些内容时，我需要它向下滑动。

​

这里是

<div id="search-container">
    <input type="text" name="search-input" id="search-input" placeholder="&#128270; type to search...">
</div>

从search-container下面向下滑动的div

<div class="container" id="search-result-container" class="hidestuff" >

在div search-result-container 中一些可能有用的JS

    <script>
     $('#search-result-container').hide();
     $('#search-input')
    .on('keyup', function(e) {
    var input = $(this).val();
    input.length ?
      $('#search-result-container').show() :
      $('#search-result-container').hide();

  })
    </script>

对于如何实现这一点，有什么想法吗？非常感谢

Answer 1

在这里，.slide<Down/Up>()方法可能很有用

​

$('#search-input').on('input', function(e) {
  var input = $.trim( this.value );
  if ( input.length > 0 )
    $('#search-result-container').stop().slideDown();
  else
    $('#search-result-container').stop().slideUp();
});

.hidestuff {
  display: none;
  background: #ddd;
  padding: 20px;
}

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

<div id="search-container">
  <input type="text" name="search-input" id="search-input" placeholder="&#128270; type to search...">
</div>
<div class="container hidestuff" id="search-result-container">
  Some JS in the div search-result-container that might be usefull
</div>

​

专业提示：

• 使用"input"事件注册任何类型的输入更改(如粘贴等)
• 不要使用两个class="" class=""，因为只有第一个应用
• 使用jQuery的$.trim()删除包装空白