Blur issues on drop-down search box in jQuery

I've implemented a search box that acts as a filter. When a user clicks in the search area, a drop-down box is displayed showing all of the possible options. Typing in the search box filters the results. Clicking outside of the box hides the results.

It uses the following HTML/CSS heiarchy

<div class="search">

    <input type="text" name="search" value="search" placeholder="search"/>

    <div class="results">

        <div class="result">

            Result 1

        </div>

        <div class="result">

            Result 2

        </div>

        ...

    </div>

</div>

I use jQuery to show/hide the dropdown on focus/blur events

var searchBar = {

    init : function(){

        $('input[name=search]').focus(searchBar.openSearch);

        $('input[name=search]').blur(searchBar.closeSearch);

        $('div.result').each(function(e){

            $(this).click(draftboardDynamic.selectResult);

        }); 

    },

    openSearch : function(e){

        $('div.results').show();

    },

    closeSearch : function(e){

        $('div.results').hide();

    },

    selectResult : function(e){

        console.log($(this));

    },

}

$(document).ready(searchBar.init);

This works quite well and I can open, close, and search (JS removed for clarity) without issue. The only bit I'm having trouble with is selecting results. The blur event seems to trigger before result.click events and the handler is never called. I can correct this issue by removing the blur binding, however, I can't figure out how to close my drop-down box when the input loses focus.

Any ideas?