在jQuery中的下拉搜索框中模糊问题

Question

我已经实现了一个充当过滤器的搜索框.当用户点击搜索区域时,会显示一个下拉框,显示所有可能的选项.在搜索框中键入会过滤结果.单击框外单击会隐藏结果.

它使用以下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>

我使用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事件之前触发,并且从不调用处理程序.我可以通过删除模糊绑定来纠正这个问题,但是,当输入失去焦点时,我无法弄清楚如何关闭我的下拉框.

有任何想法吗？

Answer 1

这是一项艰难的任务，因为该.blur事件总是会在.click. 有两种可能的解决方案，但都不是特别理想的：

1. .blur将鼠标悬停在 上时取消绑定事件div.result。鼠标移开时重新绑定它。
2. 不要使用 执行此操作.blur，而是将单击事件绑定到文档并检查目标是否不是搜索组件之一。