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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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/

Answer 4

Use jQuery:

$("#textbox").mouseenter(function(){
    $("#div").show();
});
$("#textbox").mouseleave(function(){
    $("#div").hide();
});

This so far will show the div whilst it is hovered, mouseenter checks if the textbox is moused over, mouseleave checks if it is not.