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

Question

I want to slide a div down from underneath another div when a user types something into a div.

---

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

Here is the HTML

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

The div to slide down from underneath search-container

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

Some JS in the div search-result-container that might be usefull

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

Any Ideas on how this could be achieved? Many Thanks

Answer 1

The .slide<Down/Up>() method could be useful here

 $('#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>

Pro tips:

• Use the "input" Event to register any kind of input change (like paste etc)
• Don't use two class="" class="" since only the first will apply
• Use jQuery's $.trim() to remove wrapping whitespaces