Jquery onblur not working second time

Question

I have build a jQuery PHP based instant search, I have used some fading effect along with onblur event, everything is working fine except when clicking anywhere in body for first time results disappear, but again if hover over to input field to bring result and then clicking in body results do not disappers, ie onblur does not work second time.

Please see my code for better understanding and suggest any possible way to do this.

JQuery:

$(document).ready(function () {

    $('#search-input').keyup(function(){
        var keyword=$(this).val();
        $.get('../search/instant-search.php', {keyword: keyword}, function(data){
            $('#search-result').html(data);
        });
    });

    $('#search-input').keyup(function(){ $('#search-result').fadeIn(400);});
    $('#search-input').blur(function(){$('#search-result').fadeOut(400);});   

    $('#search-input').click(function(){$('#search-result').fadeIn(400);});

    $('#search-input').mouseenter(function(){ $('#search-result').fadeIn(400);});
    $('#search-input').mouseleave(function(){ $('#search-result').fadeOut(400)});

    $('#search-result').mouseenter(function(){ $('#search-result').stop();});
    $('#search-result').mouseleave(function(){ $('#search-result').stop();}); 

});

HTML:

<input name="keyword" type="text" size="50" id="search-input" value = '';" />
<div id="search-result"></div><!--end of search-result-->

Answer 1

Why have you bind so many events to #search-result??

Check below code if it helps you.

<script language="javascript" >
     $(document).ready(function () {
     $('#search-input').keyup(function(){
         var keyword=$(this).val();
         $('#search-result').fadeIn(400);
         //$('#search-result').html('ajax result data');
         $.get('../search/instant-search.php', {keyword: keyword}, function(data){
            $('#search-result').html(data);
             });
         }); 
        $('#search-input').bind('blur', function() {
          $('#search-result').fadeOut(400);
        });
        $('#search-input').bind('focus', function() {
          $('#search-result').fadeIn(400);
        });
    });
</script>

Answer 2

You can try this:

$('#search-input').on('blur', function() {
    $('#search-result').fadeOut(400);
});
$('#search-input').on('mouseleave', function() {

    // on mouse leave check that input
    // is focused or not
    // if not focused the fadeOut

    if( !$(this).is(':focus')) {
        $('#search-result').fadeOut(400);
    }
});
$('#search-input').on('focus mouseenter', function() {
    $('#search-result').fadeIn(400);
});

DEMO

According to comment

$('#search-input').on('focus mouseenter', function() {
    $('#search-result').fadeIn(400);
});
$(document).on('click', function(e) {
    if(e.target.id != 'search-input' && e.target.id != 'search-result') {
        $('#search-result').fadeOut(400);
    }
})

DEMO