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

Question

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

我的代码基本上是这样排列的。

$("#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

根据我在这里看到的内容，我将两个代码示例放在一起，以创建我认为的答案；这是给我的：

$('#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 AutoComplete 中选择的任何内容都会被传递。但至关重要的是，如果我使用自动完成功能，它不会传递我输入的任何内容，它会清除框以准备下一次输入。

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

Answer 3

我不知道如何避免 onBlur 触发，但我认为我有同样的问题，我通过测试自动完成字段是否在 onBlur 函数中打开来解决它。

HTML 声明

<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 4

使用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 5

您可能需要更具体一些，但听起来您仍然希望在模糊时调用一些 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 6

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

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

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

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;

Answer 7

当用户从文本字段中模糊时触发一个事件，以向他/她显示一个宽度为 200 像素、高度为 100 像素、背景颜色为蓝色的小 div，并用粗体文本通知他“他不应该离开这个字段空白”