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

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

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

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

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

7 个答案: