在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");
    });
});