輸入為空時隱藏div

Question

當輸入元素為空時（用戶未輸入任何內容），我需要隱藏一個 div。 我試過這個和這個，但它們對我不起作用。 我要隱藏的 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>

Answer 2

基於您發布的兩個鏈接：HTML：

<input id="search-input" type="text" placeholder="Write here"/>

<div id="search-result-container" class="hide">
  <p>
    Results...
  </p>
</div>

CSS：

.hide {
  display: none
}

記者：

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

小提琴

Answer 3

使用這種方式：

<script>
    // Your div id which you wants to hide
    var hide = document.getElementById("yourDivId"); 
   
    //Your input field id
    var textarea = document.getElementById("YourInputFieldId");

    //Simple Logic
    if (textarea.value == "") {
        hide.style.display = "none";
    }
</script>