CODEWITHSUNDEEP
jqueryhtmlonkeyup
Cyber
Cyber

Reputation: 2704

How to display DIV on keyup in Input?

I have an global search input and when the user start typing it should display a hidden div with those results.

I cant get the div to display when keyup. Here is my fiddle

Thats my div:

 <div class=" container-fluid parent">
  <input class="form-control" placeholder="Search ..." id="GlobalSearchInput" style="padding:10px;">
  <div class="" id="showSearchDiv" style="display:none;margin-top:10px;height:450px;background-color:red;"></div>
  </div



    $(document).ready(function() {

    $("#GlobalSearchInput").keyup(function() {
      function showGlobalSearch() {
        var x = document.getElementById('showSearchDiv');
        if (x.style.display === 'none') {
          x.style.display = 'block';
        } else {
          x.style.display = 'none';
        }
      }
    });

  });

Upvotes: 0

Views: 8077

Answers (4)

Shafiqul Islam
Shafiqul Islam

Reputation: 5690

check this code and your code have some problem 1. need to use close tag and main this no need to use function for check this cause you already check onkey function

  $(document).ready(function() {
  $("#GlobalSearchInput").keyup(function() {
 var input_value = document.getElementById('showSearchDiv');
 // when value is not empty then div will show and 
 //when input value empty then div will hide
 if($(this).val() == "") {
   input_value.style.display = 'none';
 } else {
    input_value.style.display = 'block';
 }
});
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" container-fluid parent">
    <input class="form-control" placeholder="Search ..." id="GlobalSearchInput" style="padding:10px;">
    <div class="" id="showSearchDiv" style="display:none;margin-top:10px;height:450px;background-color:red;"></div>
</div>

Upvotes: 1

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

Working Demo

I have an global search input and when the user start typing it should display a hidden div with those results

So from what I can understand you need to display the div when ever user is typing something and hide it when nothing is typed. Try the below approach.

  1. On every keyup you will check the input value length.
  2. If its more than 0 then show the search result box else hide it.

Below is the sample code

$(document).ready(function() {

 $("#GlobalSearchInput").keyup(function() {
   if ($.trim($(this).val()).length) {
     $('#showSearchDiv').show();
   } else {
     $('#showSearchDiv').hide();
   }
 });
});

Upvotes: 1

ADreNaLiNe-DJ
ADreNaLiNe-DJ

Reputation: 4919

This is because in your keyup event handler you define a showGlobalSearch which is never called.

Also defining a function is not useful here, unless you need the same code anywhere in your code.

So, here is the corrected code.

$(document).ready(function() {
  $("#GlobalSearchInput").keyup(function() {
    var x = document.getElementById('showSearchDiv');
    if($(this).val() == "") {
      x.style.display = 'none';
    } else {
      x.style.display = 'block';
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" container-fluid parent">
  <input class="form-control" placeholder="Search ..." id="GlobalSearchInput" style="padding:10px;">
  <div class="" id="showSearchDiv" style="display:none;margin-top:10px;height:450px;background-color:red;"></div>
</div>

Upvotes: 2

Peter B
Peter B

Reputation: 24147

Two problems:

  • You have nested functions. Remove the line with function showGlobalSearch() { (plus the corresponding }.)
  • You toggle the display for every keyup. You probably want to keep it visible after the first keyup, e.g. by checking the input length.

Also, I'd recommend to use jQuery as much as possible, and not mix it with other means to access the DOM (so no getElementById).

The result:

$(document).ready(function() {
  $("#GlobalSearchInput").keyup(function() {
    var div = $('#showSearchDiv');
    if ($("#GlobalSearchInput").val().length > 0) {
      div.show();
    } else {
      div.hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid parent">
  <input class="form-control" placeholder="Search ..." id="GlobalSearchInput" style="padding:10px;">
  <div class="" id="showSearchDiv" style="display:none;margin-top:10px;height:450px;background-color:red;"></div>
</div>

Upvotes: 1

Related Questions