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

Question

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

---

I have tried this but I need it to slide down when the user types something in an input box.

这是HTML

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

div从search-container下面滑下来

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

div qazxsw poi中的一些JS可能很有用

search-result-container

关于如何实现这一点的任何想法？非常感谢

Answer 1

    <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>

方法在这里很有用

.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"，因为只有第一个适用
• 使用jQuery的class="" class=""删除包装空格