jQuery自動完成鼠標選擇觸發模糊事件

Question

我使用jQuery UI .autocomplete()，這是我真正喜歡的。我確實有一個我無法解決的重大問題。

當我鍵入一個字母，說小號，並計算器出現在下拉菜單中，我用鼠標選擇計算器，則輸入框暫時失去焦點，這將導致onblur要被調用的事件。

儘管技術上輸入框是blur ed當我點擊時，這違背了可用性的直覺。我該如何解決這個煩人的行爲？

Answer 1

你可以嘗試使用jQuery UI自動完成的打開和關閉事件來控制你的文本框的模糊事件。當自動完成功能打開時，您將禁用模糊事件，並在關閉時再次啓用模糊事件。我已經在jsfiddle.net上設置了一個工作示例。希望能幫助到你。

var disable=false; 

$("#tags").autocomplete({ 
    source: availableTags, 
    open: function(event, ui) { disable=true }, 
    close: function(event, ui) { 
    disable=false; $(this).focus(); 
    } 
}).blur(function() { 
    if(!disable) { 
    alert('blur'); 
    } 
}); 

Answer 2

你有什麼模糊事件？這是一種黑客，但你可以用一個相對較短的延遲爲你的模糊的處理程序做一個setTimeout。然後，您可以在自動填充的焦點事件處理程序中設置一個變量，並告訴您的模糊處理程序不會觸發。

Answer 3

雖然上述drzone88的回答的偉大工程，還有就是我無意中發現這應該帶來了一個邊緣的情況：當你搜索，並沒有顯示的結果，該關閉事件永遠不會被調用。那麼你的模糊功能也將永遠不會被調用。所以我在響應內容爲空時設置標誌來解決問題。

我的解決方案還使用jquery.data（），所以我們不必拖動一個變量：

$(".selector").autocomplete({ 
    source: ["your values here"], 
    open: function(event, ui) { $(this).data("no-blur", true); }, 
    close: function(event, ui) { 
    $(this).data("no-blur", false); 
    }, 
    response: function(event, ui){ 
    if(ui.content.length == 0) //when search results are empty, close is not called 
     $(this).data("no-blur", false); 
    else 
     $(this).data("no-blur", true); //not sure open is called again either if we re-get results 
    } 
}).on("blur", function() { 
    if(!$(this).data("no-blur")) { 
    //do something 
    } 
}); 

事實證明，但是，因爲在這事件什麼是所謂的秩序和我實際上需要做的事情（當用戶模糊字段而沒有選擇建議列表中的一個選項時，模糊地點火），我最終在選擇函數開始時將我的noblur標誌設置爲true，並在模糊的結束，如下所示：

$(".selector").autocomplete({ 
    source: ["your values here"], 
    select: function(ui, event){ 
    $(this).data("no-blur", true); 
    //do select stuff 
    }, 

}).on("blur", function() { 
    if(!$(this).data("no-blur")) { 
    //do something 
    } 
    $(this).data("no-blur", false); 
}); 

希望這可以幫助別人！