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

希望这可以帮助别人！