Jquery Form - show/hide/stay visible on writing on input area

I have researched this for about开发者_运维百科 3 days non-stop and I'm starting to feel real despair. Also I have to say that I'm quite a newbie with JQuery, I only do small things now and then. So, here's the thing: I have this search form (in Wordpress). I want it to be hidden at the start. On mouse over menu link, it hides link and displays search form. On mouseleave, it hides search form and displays link again. I've accomplished this, and this is the code:

jQuery(document).ready(function(){
  jQuery('#toggle-search').hide();
  jQuery(".buscar").mouseenter(function(){
    jQuery('#toggle-search').show('fast');

    return false;
  });   

  jQuery(".inputbuscar").click(function(){
    jQuery('#toggle-search').show('fast');

    return false;
  });   

  jQuery(".buscar").mouseleave(function(){
    jQuery('#toggle-search').hide('fast');

    return false;
  });
});

This would be the html

<li id="search-jq" class="buscar">
  <a href="#">Buscar</a>
  <div id="toggle-search">
    <form role="search" method="get" id="searchform" action="" >
      <div class="form-buscar">
        <label class="screen-reader-text" for="s"></label>
        <input type="text" name="s" id="s" class="inputbuscar" onclick="this.value='';" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="" class="lupa"/>
      </div>
    </form>
  </div>

Css is not really relevant, I'm not applying any display:none.

What I can't do is to make the form still visible if someone is writing and moves the mouse out of the area (i.e, form stay visible while writing (onclick?), despite the mouse being somewhere else, but get form to dissappear if they never clicked in the form). I'm out of perspective now and I don't know if this is really simple or just not possible to do. Any hints are really welcome.

Use Ben Alman's code snippet - https://gist.github.com/450017

jQuery.expr[':'].focus = function( elem ) {
  return elem === document.activeElement && ( elem.type || elem.href );
};

Then you can do the following:

jQuery(".buscar").mouseleave(function(){
  if($('#toggle-search input:focus').length == 0) {
    jQuery('#toggle-search').hide('fast');
  }

  return false;
});

EDIT: Updated code to use .data method to store the corrent search box hover state.

$(document).ready(function(){
  var $search = $('#toggle-search');
  var $search_trigger = $(".buscar");
  $search.hide().data('hover', false);

  $search_trigger.mouseenter(function(){
    $search.show('fast').data('hover', true);
  }).mouseleave(function(){
    if($search.find('input:focus').length == 0) {
      $search.hide();
    }
    $search.data('hover', false);
  });

  $(".inputbuscar").click(function(){
    $search.show('fast');

    return false;
  });     

  $search.find("input").focusout(function(){
    setTimeout(function() {
      if($search.find('input:focus').length == 0 && $search.data('hover') == false) {
        $search.hide('fast');
      }    
    }, 10);
  });
});

Try something like this:

$("#searchform :input").focus(function(){
    $("#toggle-search").show();
});

You may also want to look at toogle() to clean up your code a bit: http://api.jquery.com/toggle/