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之前触发。有两种可能的解决方案，两者都不是特别理想的：

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

Answer 2

使用“mousedown”事件代替“点击”：

$(".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");
    });
});

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

3 个答案: