防止自动完成选择触发blur()

我试图防止模糊发生时，select: in自动完成被调用。(select:在自动完成的建议框中点击项目时调用)但是，当我从建议框中选择一个项目时，无意中调用了blur。我该如何解决这个问题?

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

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

谢谢!

编辑:这里有一个简短的背景。我试图让用户搜索/选择一个项目或创建一个新的项目，如果用户模糊的输入。

这个自动完成的jquery UI小部件附带了一个"change"事件，我认为这是你想要的。它就像blur一样被调用，只是当鼠标选中一个项目时，它不会被调用。

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

基于我在这里看到的，我把两个代码样本放在一起创建我认为是答案的东西;是给我的:

$('#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函数的名字猜到了，我用它来标记文章或产品，但是多亏了上面的文章，我现在已经成功地将自动完成添加到该功能中。

我不知道如何避免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用于测试用户是在字段中输入了文本还是从自动完成列表中选择了某些内容。在close函数中，如果用户从列表中选择了某些内容，我会模糊字段。我不知道这对你来说是否有意义。

use 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

你可能需要更具体，但听起来你仍然希望一些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/

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

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

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

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;

触发一个事件，当用户从一个文本框模糊显示他/她一个小的div，宽度为200px，高度为100px，背景颜色为蓝色，并有一个粗体文本告诉他"他不应该让这个字段留空"

相关内容

最新更新

热门标签：