javascript - jQuery - 当用户在输入中输入内容时，将 div 从另一个 div 下滑出和向下滑动

Question

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

---

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

这是 HTML

<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()删除环绕空格