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

I'm trying to prevent blur to happen when select: in autocomplete is called. (select: is called when the item is clicked on suggestion box of autocomplete) However, unintentionally, blur is called when I select an item from a suggestion box. How would I fix this problem?

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

Here's how my code is basically lined up.

这是我的代码基本排列的方式。

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

Thank you!

Edit: Here's a brief context. I am trying to allow users to search/select an item or create a new item if the user blurs the input.

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

7 个解决方案

#1

The autocomplete jquery UI widget comes with a "change" event which I think does what you want. It is called just like a blur, except it isn't called when an item is selected with the mouse.

自动完成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");
});

#2

Based on what I've seen here I've put two of the code samples together to create what I believe to be the answer; it was for me:

根据我在这里看到的内容,我将两个代码示例放在一起,以创建我认为的答案;这对我来说:

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

Here's my text box:

这是我的文本框:

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

What this does for me is whatever I type in the text box is passed to the AddTag function or whatever I select from the jQuery UI AutoComplete is passed. But critically it doesn't pass whatever I've typed IF I then use the autocomplete and it clears the box ready for the next input.

这对我来说是什么,我在文本框中键入的内容被传递给AddTag函数或我从jQuery UI中选择的任何内容都传递了AutoComplete。但是关键的是它并没有通过我键入的任何内容如果我然后使用自动完成并且它清除了准备好下一个输入的框。

As you may have guessed from the name of the function AddTag I use this for tagging posts or products, but thanks to the posts above I have now managed to add autocomplete to that feature.

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

#3

I don't know how to avoid onBlur to trigger, but I think I have the same problem and I have solved it by testing if the autocomplete field is open in the onBlur function.

我不知道如何避免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;
}

This way the code in onBlurFunction() will not run if the autocomplete is open. itemSelected is used to test if the user entered the text in the field or selected something from the autocomplete list. In the close function I blur the field if the user has selected something from the list. I don't know if that makes sense in your case.

这样,如果自动完成打开,onBlurFunction()中的代码将不会运行。 itemSelected用于测试用户是在字段中输入文本还是从自动完成列表中选择了某些内容。在关闭功能中,如果用户从列表中选择了某些内容,我会模糊该字段。我不知道你的情况是否合理。

#4

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

or you can use event.preventDefault() in same way...

或者您可以以相同的方式使用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();  
    });

reference event.preventDefault

#5

You might need to get more specific, but it sounds like you still want some blur function to be called upon blurring, but you don't want it called on initial setup; try something like this...

您可能需要更具体,但听起来您仍然希望在模糊时调用某些模糊函数,但您不希望在初始设置时调用它;尝试这样的事......

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

I also think you'll want to use stopPropagationImmediate. See the docs: http://api.jquery.com/event.stopImmediatePropagation/

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

#6

a very simple solution for this issue.

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

unbind blur event handler when dropdown is displaying, and bind blur event handler again after selection.

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

adding two events when initialising autocomplete

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

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

Modify jquery autocomplete source code:

修改jquery自动完成源代码:

adding code options.displaydropdowncallback();

添加代码options.displaydropdowncallback();

under

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

adding options.selectdatacallback(selected.data);

under

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

        if (!selected)
            return false;

#7

Trigger an event when the user blur from a text feild to show him/her a small div with 200px width and 100px height with blue background color and, with a bold text that inform him that "he shouldn't leave this field blank"

当用户从文本领域模糊以向他/她显示宽度为200px且高度为100px且具有蓝色背景颜色的小div时触发事件,并且使用粗体文本通知他“他不应该将此字段留空”