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

Question

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

它使用以下 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)。我唯一遇到的麻烦是选择结果。 blur 事件似乎在 result.click 事件之前触发，并且永远不会调用处理程序。我可以通过删除模糊绑定(bind)来纠正这个问题，但是，我不知道如何在输入失去焦点时关闭我的下拉框。

有什么想法吗？

Answer 1

这很难，因为 .blur 事件总是在 .click 之前触发。有两种可能的解决方案，但都不是特别理想:

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