I would say the correct answer is a combination of the two answers given :)
//var tableRow = $("#search").parent().parent();
$("#search").hide(); /*hide the search input initially*/
$("#filter").hover(
function () {
$("#search").show();
},
function () {
if($("#search").val().trim() == "") //only hide the search box is empty
$("#search").hide();
}
);
EDIT
$("#search").hide(); /*hide the search input initially*/
$("#filter").hover(
function () {
$("#search").slideToggle();
},
function () {
if($("#search").val().trim() == "") //only hide the search box if it is empty
$("#search").slideToggle();
}
);