Show and hide table row on hover, initially hidden, not hidden if input

Question

I have an HTML table with a row that has an input. When I hover over the row, I want to expand the row and show the input and then collapse if not hovered. However, I want the row to start of collapsed and I do not want the row to collapse if there is a value in the input.

Here is a fiddle:

http://jsfiddle.net/4Hdge/

<table style="width:300px; background-color:#d3d3d3">
 <tr id="filter" style="background-color:blue">
  <td><input id="search" placeholder="Search" style="width:100px"/></td>
  <td></td> 
  <td></td>
 </tr>
 <tr>
  <td>Jill</td>
  <td>Smith</td> 
  <td>50</td>
 </tr>
 <tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <td>94</td>
 </tr>
</table>


$("#filter").hover(

function () {

        $("#search").show();

  },
function () {

        $("#search").hide();

  }
);

Answer 1

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