How to hide part of css when input is empty? - html

Question

I'm trying to hide the search result when the search is back to empty. Is there a way to do that?
Everything is working fine. I just don't like to see the search result of the last letter. Example if you type A and you empty the input box. The result will stay there.
Thanks to the person that know the answer.
<div id="result"></div> should be the one to be blocked.
My CSS code for the search:
.content{
width:275px;
}
#searchid
{
width:275px;
border:solid 1px #000;
padding:10px;
font-size:14px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#result
{
position: absolute;
width:275px;
padding:10px;
display:none;
border-top:0px;
overflow:hidden;
border:1px #CCC solid;
background-color: white;
}
.show
{
padding:10px;
border-bottom:1px #999 dashed;
font-size:15px;
height:50px;
}
.show:hover
{
background:lightgrey;
color:#FFF;
cursor:pointer;
}
My HTML Code for the search input box:
<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search"/>
<div id="result"></div>
</div>
My Search Display are like that:
<div class="show" align="left">
<span class="name">' . $rowsTitle['title'] . ' ' . $label . "<br>".
</div>
JQuery that I use to get the search information:
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
$.ajax({
type: "GET",
url: "/sheridan/script/search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
I forgot to add the JQuery function that I use to get the information out of the database.

Answer 1

I haven't cleared the result div as you are filling it with data when there is a letter.
$(".search").on("keyup", function(){
if($(this).val()==""){
$("#result").hide();
}
else {
$("#result").show();
}
});
Fiddle

Answer 2

You will have to use JavaScript to perform this action as CSS does not support any way to identify empty input fields.
I have chosen to use jQuery for this example but it could easily be achieved using no external libraries.
$('.search').on('input', function() {
$('#result').toggle( $(this).val() );
});
JSFiddle

Answer 3

Use JQuery
$( "#searchid" ).keypress(function() {
var search = $( "#searchid" ).val()
if(search==''){
$("#result").html();
}
});

Answer 4

Try following code:
$(document).ready(function(){
$("#searchid").keypress(function(){
var len = $("#searchid").val().length;
if (len <= 0)
{
//make result blank
$("#result").hide();
}
});
});
edit:
use $("#result").hide();
or
$("#result").css("display","none");