7

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

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

有任何想法吗？

4

3 回答 3

3

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

  1. .blur将鼠标悬停在 上时取消绑定事件div.result。在鼠标移出时重新绑定它。
  2. 不要使用 执行此操作，而是.blur将单击事件绑定到文档并检查目标是否不是搜索组件之一。
于 2012-05-16T22:30:39.550 回答
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>

于 2016-09-06T17:21:47.783 回答
0

在鼠标悬停/鼠标移出时绑定和取消绑定模糊事件。对于那些感兴趣的人，我创建了一个小提琴来证明这一点：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");
    });
});
于 2017-06-05T03:23:41.517 回答