输入为空时隐藏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>