JSFiddle - React, Tailwind, and code Playground

by Carl Angelo Nievarez

HTML

<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>

JavaScript

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

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