CODEWITHSUNDEEP
javascriptjqueryhtml
Neeraj
Neeraj

Reputation: 497

How to hide and show a div when click on text box using jQuery

How can i hide and show a div when click on the basis of text box. i want to show these type of result,the cursor pointer is inside the textbox the div will shown otherwise the focus is out the div will be hidden and if any value is inside a textbox the div will shown if the value is cleared the div will be hidden .these are the code

<div class="banner_search_inner_box_search">
<input type="text" name="search" class="search" id="searchid" onkeyup="getshows();"  value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>

<div id="drope_box" style="display:none;">
<div class="banner_search_type">
<select id="property_type" name="property_type">
<option value="All">All</option>
<option value="Apartment">Apartment</option>
<option value="Plot">Plot</option>
</select>
</div>
<div class="banner_search_price_min">
 <select name="price_min" class="search_list" id="price_min">
  <option value="">Price Min</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>  
</div>
<div class="banner_search_price_max">
 <select name="price_max" id="price_max">
  <option value="">Price Max</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select> 
</div>

</div>

here is my js code

<script type="text/javascript">
function getshows()
  {
    if(document.getElementById("searchid").value != "")
    {
    document.getElementById("drope_box").style.display="block";
     }
     else
     {
    document.getElementById("drope_box").style.display="none";

       }    
   }

  </script>

<script type="text/javascript">
$('#searchid').blur(function() {
$("#drope_box").hide()
});

 $('#searchid').focus(function() {
 $("#drope_box").show()
 });   
 </script>

somebody please help me

Upvotes: 0

Views: 15682

Answers (3)

antony
antony

Reputation: 2893

It's generally advised to attach events using jQuery's on rather than blur(), focus(), click() etc in newer versions of jQuery, although I admit in this case there is no difference (read more here Why use jQuery on() instead of click()). But caching jQuery objects by storing them in a variable, like below, is slightly faster.

var $search = $('#searchid');
var $dropBox = $('#drope_box');

$search.on('blur', function () {
    $dropBox[($.trim($search.val()).length > 0 ? 'show' : 'hide')]();
}).on('focus', function () {
    $dropBox.show();
});

Upvotes: 2

G.Mendes
G.Mendes

Reputation: 1201

There's no problem with show and hide other than when it's showed the div hides if you try to select the options, to turn this around we can use focusout on the drope_box div:

$(document).ready(function(){

   $('#drope_box').focusout(function() {
     //check if the text input and selects have values selected
     if($("#searchid").val() == "" && 
        $("#property_type").val() == "" && 
        $("#price_min").val() == "" && 
        $("#price_max").val() == "" )
           $("#drope_box").hide() //if not, hides
   });

   $('#searchid').focus(function() {
     $("#drope_box").show() 
   });   
});

Of course, for it to work the:

<option value="All">All</option>

Must be cleared:

<option value="">All</option>

FIDDLE: http://jsfiddle.net/e672Y/1/

Upvotes: 1

Ani
Ani

Reputation: 4523

Here: http://jsfiddle.net/Kq9pX/

JS

Do it on load: Wrap around document.ready function.

$('#searchid').blur(function() {
  if($(this).val() != ""){
    $("#drope_box").show();    
  }
  else{
    $("#drope_box").hide(); 
  }
});

$('#searchid').focus(function() {
  $("#drope_box").show();
});

Upvotes: 2

Related Questions