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

【问题标题】：Blur issues on drop-down search box in jQueryjQuery中下拉搜索框的模糊问题
【发布时间】：2012-05-24 13:10:20
【问题描述】：

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

它使用以下 HTML/CSS heiarchy

&ltdiv class="search">
    &ltinput type="text" name="search" value="search" placeholder="search"/>
    &ltdiv class="results">
        &ltdiv class="result">
            Result 1
        &lt/div>
        &ltdiv class="result">
            Result 2
        &lt/div>
        ...
    &lt/div>
&lt/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 事件之前触发，并且永远不会调用处理程序。我可以通过删除模糊绑定来解决这个问题，但是，当输入失去焦点时，我不知道如何关闭我的下拉框。

有什么想法吗？

【问题讨论】：

标签： javascript jquery html drop-down-menu onblur

【解决方案1】：

这是一个艰难的过程，因为.blur 事件总是会在.click 之前触发。有两种可能的解决方案，但都不是特别理想的：

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

【讨论】：

+1 绝对不理想，但完成了工作。谢谢！

【解决方案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>

【讨论】：

【解决方案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");
    });
});

【讨论】：