title: How to hide and show a div when click on text box using jQuery
body: <p>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</p>
  
  <pre><code>&lt;div class="banner_search_inner_box_search"&gt;
  &lt;input type="text" name="search" class="search" id="searchid" onkeyup="getshows();"  value="" placeholder="Enter a City,Locality" autocomplete="off"&gt;
  &lt;div id="result"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="drope_box" style="display:none;"&gt;
  &lt;div class="banner_search_type"&gt;
  &lt;select id="property_type" name="property_type"&gt;
  &lt;option value="All"&gt;All&lt;/option&gt;
  &lt;option value="Apartment"&gt;Apartment&lt;/option&gt;
  &lt;option value="Plot"&gt;Plot&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="banner_search_price_min"&gt;
   &lt;select name="price_min" class="search_list" id="price_min"&gt;
    &lt;option value=""&gt;Price Min&lt;/option&gt;
  &lt;option value="100000"&gt;1 lac&lt;/option&gt;
  &lt;option value="1000000"&gt;10 lacs&lt;/option&gt;
  &lt;/select&gt;  
  &lt;/div&gt;
  &lt;div class="banner_search_price_max"&gt;
   &lt;select name="price_max" id="price_max"&gt;
    &lt;option value=""&gt;Price Max&lt;/option&gt;
  &lt;option value="100000"&gt;1 lac&lt;/option&gt;
  &lt;option value="1000000"&gt;10 lacs&lt;/option&gt;
  &lt;/select&gt; 
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>here is my js code</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function getshows()
    {
      if(document.getElementById("searchid").value != "")
      {
      document.getElementById("drope_box").style.display="block";
       }
       else
       {
      document.getElementById("drope_box").style.display="none";
  
         }    
     }
  
    &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $('#searchid').blur(function() {
  $("#drope_box").hide()
  });
  
   $('#searchid').focus(function() {
   $("#drope_box").show()
   });   
   &lt;/script&gt;
  </code></pre>
  
  <p>somebody please help me</p>