jQuery - 防止自动完成选择触发模糊（）

Question

我试图防止模糊发生时选择：在自动完成被调用。 （选择：在自动完成的建议框中单击项目时调用） 但是，无意中，从建议框中选择项目时会调用模糊。 我该如何解决这个问题？

下面是我的代码基本排队的方式。

$("#input_field").autocomplete({ 
    source: "source.php", 
    select: function(event, ui) { alert("Item selected! Let's not trigger blur!"); } 
}).blur(function(event) { 
    alert("Alert if the user clicked outside the input, pressed enter, or tab button."); 
    alert("But not from the item selection! :S"); 
}); 

谢谢！

编辑：这是一个简短的上下文。我试图让用户搜索/选择一个项目或创建一个新的项目，如果用户模糊输入。

Answer 1

自动完成的jQuery UI部件带有一个“更改”事件，我认为这是你想做的事情。它被称为模糊，除非在用鼠标选择项目时不调用它。

$("#input_field").autocomplete({ 
    source: "source.php", 
    select: function(event, ui) { alert("Item selected! Let's not trigger blur!"); } 
}); 
$("#input_field").bind('autocompletechange', function(event, ui) { 
    alert("Alert if the user clicked outside the input, pressed enter, or tab button."); 
    alert("But not from the item selection! :S"); 
}); 

Answer 2

使用event.stopPropagation();

$("#input_field").autocomplete({ 
    source: "source.php", 
    select: function(event, ui) { alert("Item selected! let's not trigger blur!"); } 
}).blur(function(event) { 
event.stopPropagation();  
alert("noooooo! blur is still being called!"); 
}); 

，或者你可以同样的方式使用event.preventDefault() ...

$("#input_field").autocomplete({ 
     source: "source.php", 
     select: function(event, ui) { alert("Item selected! let's not trigger blur!"); } 
    }).blur(function(event) { 
    event.preventDefault(); 
    }); 

参考event.preventDefault

Answer 3

您可能需要获得更具体的，但它听起来像是你仍然需要模糊一些blur函数，但您不希望它在初始设置时调用;尝试像这样...

$('#input_field').data('ready_to_blur',false) 
    .blur(function(e) { 
     if ($(this).data('ready_to_blur')) 
      return; 
     $(this).data('ready_to_blur',true); 
     event.stopPropagationImmediate(); 
    }) 
    .autocomplete({ 
     source: "source.php", 
     select: function(event, ui) { alert("Item selected! let's not trigger blur!"); } 
    }) 

我也认为你会想要使用stopPropagationImmediate。请参阅文档：http://api.jquery.com/event.stopImmediatePropagation/

Answer 4

我不知道如何避免onBlur触发，但我想我遇到了同样的问题，并且通过测试onBlur函数中是否打开了自动填充字段来解决此问题。

HTML declaraction

<input id="autocompleteTextbox" type="text" onblur="onBlurFunction();" 
     onkeyup="onKeyUpFunction();" /> 

的Javascript

var autocompleteOpen = false; 
var itemSelected = false; 

$("#autocompleteTextbox").autocomplete({ 

    source: function(request, response) { 
     //Set source. 
    }, 

    select: function(event, ui) { 
     itemSelected = true; 
    }, 

    open: function(event, ui) { 
     autocompleteOpen = true; 
    }, 

    close: function(event, ui) { 
     autocompleteOpen = false; 
     //A selection caused the close. Blur the autocomplete field. 
     if (itemSelected) { 
      document.getElementById("autocompleteTextbox").blur(); 
     } 
    } 
}); 


function onBlurFunction() { 
    if (!autocompleteOpen) { 
     //Do stuff. 
    } 
} 

function onKeyUpFunction() { 
    itemSelected = false; 
} 

这样，如果自动完成是在开放的onBlurFunction代码（）将不会运行。 itemSelected用于测试用户是否在字段中输入文本或从自动完成列表中选择了某些内容。在关闭功能中，如果用户从列表中选择了某些东西，则模糊该字段。我不知道你的情况是否有道理。

Answer 5

基于我在这里看到的，我已经把两个代码示例放在一起来创建我认为是答案的东西;这对我来说：

$('#txtCatagory').autocomplete({ source: 'handlers/Catagories.ashx', minLength: 2, 
    change: function (event, ui) { 
     AddTag(event.srcElement.value); 
     $('#txtCatagory').val(''); 
    }, 
    select: function (event, ui) { 
     event.preventDefault(); 
     AddTag(ui.item.value); 
     $('#txtCatagory').val(''); 
    } 
}); 

这里是我的文本框：

<asp:TextBox runat="server" ID="txtCatagory" ClientIDMode="Static" OnKeyPress="return disableEnterKey(event)" /> 

这里做的事情对我来说是什么我在文本框中键入传递给AddTag功能或任何我从jQuery选择UI自动完成已通过。但批判地说，它不会传递我输入的任何内容，如果我使用自动完成功能，它会清除该框以准备下一次输入。

正如您可能已经从函数AddTag的名称中猜到的那样，我使用它来标记帖子或产品，但是感谢上面的帖子，我现在设法将自动完成添加到该功能。

Answer 6

触发一个事件，当用户从一个文本域模糊显示他/她一个200px宽和100px高的蓝色背景色的小div时，并用粗体文本告诉他“他不应该离开这个字段空白“

Answer 7

这个问题的一个非常简单的解决方案。

显示下拉列表时取消绑定模糊事件处理程序， 并在选择后再次绑定模糊事件处理程序。

添加两个事件自动完成初始化时

displaydropdowncallback: function(){ $("#AUTOTEXT").unbind("blur"); }, 
selectdatacallback: function (data) { 
    $("#AUTOTEXT").blur(validatepostcode); 
} 

修改jquery的自动完成源码：

添加代码 options.displaydropdowncallback（）;

下

show: function() { 
    var offset = $(input).offset(); 

加入 options.selectdatacallback（selected.data）;

下

function selectCurrent() { 
     var selected = select.selected(); 

     if (!selected) 
      return false;