title: How to hide part of css when input is empty?
body: <p>I'm trying to hide the search result when the search is back to empty. Is there a way to do that?</p>
  
  <p>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.</p>
  
  <p>Thanks to the person that know the answer. </p>
  
  <p><code>&lt;div id="result"&gt;&lt;/div&gt;</code> should be the one to be blocked.</p>
  
  <p>My CSS code for the search:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>My HTML Code for the search input box:</p>
  
  <pre><code>&lt;div class="content"&gt;
                          &lt;input type="text" class="search" id="searchid" placeholder="Search"/&gt;
                          &lt;div id="result"&gt;&lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>My Search Display are like that:</p>
  
  <pre><code>&lt;div class="show" align="left"&gt;
                             &lt;span class="name"&gt;&lt;a href="/sheridan/page/?p=' .  $rowsTitle['id'] . '"&gt;' . $rowsTitle['title'] . '&lt;/a&gt; ' . $label . "&lt;br&gt;".
                        &lt;/div&gt;
  </code></pre>
  
  <p>JQuery that I use to get the search information:</p>
  
  <pre><code>$(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 = $("&lt;div/&gt;").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();
          });
      });
  </code></pre>
  
  <p>I forgot to add the JQuery function that I use to get the information out of the database.</p>