Order of events with jquery

I have the following situation:

Textbox where you can type a keyword. The keyup event triggers an AJAX script which looks in the database for similar keywords. When found a DIV will be visible (show()) with the found keywords.

When clicking on one of the keywords in the div the selected keyword will be written in the textbox and the div will be hidden (hide()).

But when the DIV is visible and I click somewhere else in the form or I tab out of the textbox (the focusout event) I would like the DIV to be hidden.

This could be done with the focusout event. But when I use the click event for registering the click on a keyword in the DIV and using the focusout event for registering the focusout event the following problem occurs: When clicking the keyword in the div the focusout event will be triggered so my DIV will be hidden but the keyword will not be copied to the textbox.

I currently have the following code:

/*click on found "link with class f_link" in DIV*/
$(".f_link").live('click', function(){

    $newval=$(this).attr("id");
    $("#textbox_id").val($newval);
    $("#searchresults").hide();
})


/*when losing focu开发者_开发问答s textbox hide DIV */
$("#textbox_id").focusout(function(){
    $("#searchresults").hide();

})

explaination:

#textbox_id : id of textbox
#searchresults: id of DIV with found results
.f_link : class of "link" in div searchresults like <span class="f_link" id="result1>result 1</span>

Try:

/*when losing focus textbox hide DIV */
$("#textbox_id").blur(function(){
    $("#searchresults").hide();
})

Blur didn't work (focusout is an event in jquery as well..)

I managed it with this solution:

$(".f_link").live('click', function(){
    $("#textbox_id").val($newval=$(this).attr("id"));
    $("#searchresults").hide();
})

$mouseover=false;
$("#searchresults").live('mouseover', function(){
    $mouseover=true;
})

$("#searchresults").live('mouseout', function(){
    $("#textbox_id").focus();
    $mouseover=false;
})



$("#textbox_id").focusout(function(){
    if ($mouseover) {
        return;
    }
    $("#searchresults").hide();
})

You can use blur function istead of focusout...

$("#textbox_id").live('blur',function(){
     $("#searchresults").hide();
})