javascript - 输入为空时隐藏div

Question

当输入元素为空(用户未输入任何内容)时，我需要隐藏 div。我已经尝试过this和 this但它们不适合我。我想要隐藏的 div 的 id 为 search-result-container，输入的 id 为 search-input。 当输入为空时，我需要隐藏 div。

这是我的 HTML 代码的相关部分:

 <!-- Html Elements for Search -->
<div id="search-container">
  <input type="text" name="search-input" id="search-input" placeholder="&#128270; type to search...">

  <h1></h1>
  <h1></h1>
  <h1></h1>
</div>
</div>

<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>

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

  <ul id="results-container"></ul>

  <!-- Script pointing to search-script.js -->
  <script src=[SEARCH JS]></script>

  <!-- Configuration -->


  <script>
    SimpleJekyllSearch({
      searchInput: document.getElementById('search-input'),
      resultsContainer: document.getElementById('results-container'),
      searchResultTemplate: '<a href="{url}"><h1>{title}</h1></a><h2 class="searchresults">{date}</span></h2>',
      json: [JSON URL]
    })
  </script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>




</div>
</div>

非常感谢任何帮助，提前谢谢您。

Answer 1

这是使用 jquery 执行您想要的操作的非常简单的方法:

$('#search-input').on('input', function() {
  $('#search-result-container').css('display', $(this).val()  !== '' ? 'block' : 'none')
});

#search-result-container {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id ="search-input">
<div id="search-result-container">This will be hidden</div>