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

{{1}}

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
}

JS：

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

JSFIDDLE

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>

输入为空时隐藏div

3 个答案: