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

Question

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

它使用以下HTML / CSS heiarchy

&ltdiv class="search">
    &ltinput type="text" name="search" value="search" placeholder="search"/>
    &ltdiv class="results">
        &ltdiv class="result">
            Result 1
        </div>
        &ltdiv 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时取消绑定.blur事件。 在mouseout上重新绑定它。
2. 而不是使用.blur执行此.blur ，将click事件绑定到文档并检查目标是否不是搜索组件之一。

Answer 2

使用“mousedown”事件而不是“click”：

$(".container")
  .on("blur focus", "input", function({type}) {
    $(this).next().toggle(type === "focusin");
  })
  .on("mousedown", "ul", function({target: {innerText}}) {
    $(this).prev().val(innerText);
  });

 $(".container") .on("blur focus", "input", function({type}) { $(this).next().toggle(type === "focusin"); }) .on("mousedown", "ul", function({target: {innerText}}) { $(this).prev().val(innerText); }); 

 .container { position: relative; display: inline-block; } input, ul { border: solid 1px black; } ul { list-style: none; position: absolute; left: 0; right: 0; z-index: -1; margin: -1px 0 0; padding: 0; } label, li { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="_input"><b>Select value:</b></label> <div class="container"> <input id="_input"> <ul style="display:none"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <a href="#_input">Picked a wrong value?</a> 

Answer 3

在鼠标悬停/鼠标移出时绑定和解除模糊事件的工作原理。 对于那些感兴趣的人，我创造了一个小提琴来证明这一点： https ： //jsfiddle.net/AdamKMorris/uoqvfy2L/

我的示例使用基本的jquery和.bind / .unbind来切换搜索框：

$("#searchButton").click(function()
{
    $("#searchBar").slideToggle();
    $("#searchText").focus();
}).mouseover(function()                 
{
    $("#searchText").unbind('blur');
}).mouseout(function()
{
    $("#searchText").bind('blur', function()
    {
        $("#searchBar").slideToggle("fast");
    });
});