Hide div when input is empty

Question

I need to hide a div when an input element is empty (the user has not typed anything in). I have tried this and this but they do not work for me. the div I want to hide has an id of search-result-container and the input has an id of search-input. I need to hide the div when the input is empty.

Here is the relevant part of my HTML code:

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

Any help will be very much appreciated, Thank you in advance.

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. — Gerardo BLANCO
– Gerardo BLANCO, Commented Feb 27, 2018 at 18:25
you should probably be loading in the JQuery script before any script in which you use JQuery (if you use it in search-script.js) — Ryan Schaefer
– Ryan Schaefer, Commented Feb 27, 2018 at 18:25
Please show in your question the logic you tried to use to solve your problem that is not working. — Taplar
– Taplar, Commented Feb 27, 2018 at 18:29

user3483203 · Accepted Answer · 2018-02-27 18:35:06Z

2

Here is a very simple way of doing what you want using 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>

edited Feb 27, 2018 at 18:35

answered Feb 27, 2018 at 18:29

user3483203

51.3k10 gold badges72 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Benjamin Sommer Over a year ago

Will this interfere with my other JS which contains the search-script.js?

user3483203 Over a year ago

By reading this

user3483203 Over a year ago

Working Did you read the link I sent? you need to include it before the script.

finw3 · Accepted Answer · 2018-02-27 18:33:25Z

0

Based on both links you post: 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

answered Feb 27, 2018 at 18:33

finw3

4536 silver badges10 bronze badges

Comments

Maizied Hasan Majumder · Accepted Answer · 2020-11-06 05:19:27Z

0

Use This Way:

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

answered Nov 6, 2020 at 5:19

Maizied Hasan Majumder

1,0531 gold badge13 silver badges28 bronze badges

Collectives™ on Stack Overflow

Hide div when input is empty

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related