Проблемы с размытием при выпадающем поиске box в jQuery

Я реализовал окно поиска, которое действует как фильтр. Когда пользователь щелкает в области поиска, отображается раскрывающийся список, показывающий все возможные варианты. Ввод в поле поиска фильтрует результаты. Щелчок за пределами поля скрывает результаты

Он использует следующую иерархию HTML/CSS

<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>

Я использую jQuery, чтобы показать/скрыть раскрывающийся список при фокусе/размытии событий

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);

Это работает достаточно хорошо и я могу открывать, закрывать и искать (JS удален для ясности) без проблем. Единственное, с чем у меня возникли проблемы, это выбор результатов. Событие размытия, кажется, запускается до событий result.click, и обработчик никогда не вызывается. Я могу исправить эту проблему, удалив привязку размытия, однако я не могу понять, как закрыть раскрывающийся список, когда ввод теряет фокус.

Есть идеи?