javascript - How to hide and show a div when click on text box using jQuery - Stack Overflow

admin管理员组

文章数量:1356443

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" autoplete="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

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" autoplete="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

• javascript
• jquery
• html

Share Improve this question Follow edited Mar 8, 2014 at 14:25 rusben 64611 gold badge66 silver badges1313 bronze badges asked Mar 8, 2014 at 14:20 NeerajNeeraj 49755 gold badges1010 silver badges2222 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Here: http://jsfiddle/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();
});   

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();
});

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/e672Y/1/

本文标签： javascriptHow to hide and show a div when click on text box using jQueryStack Overflow