jQuery - Preventing autocomplete select triggering blur()

Question

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.

Answer 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.

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

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.

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.

Answer 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.

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.