JQuery UI autocomplete change event - resetting selection ID

Question

I'm using the AutoComplete UI widget for a form to allow users to type in a customer name. The idea is that they can either select an existing customer and populate other fields in the form, or they can free-type a new customer to be created. When a user selects an existing customer, I use the select event to populate a hidden input to store the ID associated with that customer.

The problem I'm having is if a user first selects a customer from the list but then goes in and edits the text, in effect creating a new customer, I need to be able to clear out that hidden input ID value.

I referred to this SO question and created the following code:

$(function() {
            $("#customerName").autocomplete({
                source: "/Customers/CustomerListJSON",
                minLength: 2,
                select: function(event, ui) {
                    $("#customerId").val(ui.item ? ui.item.Id : "");
                },
                change: function(event, ui) {
                    try {
                        $("#trace").append(document.createTextNode(event.originalEvent.type + ", "));
                        if (event.originalEvent.type != "menuselected")
                            $("#customerId").val("");
                    } catch (err) {
                        $("#customerId").val("");
                    }
                }
            });
        });

The problem is that the change event is fired on blur, so if a user selects a customer, the hidden input value is populated, but as soon as they move focus off the input box it's cleared right away. However, if I exclude the blur event from the event.originalEvent.type test, then the hidden field's value never gets reset in the original scenario where a user edits a previously-selected value.

Has anyone had to tackle this before, and if so can you offer some guidance on how I can manage that hidden input's value so it's populated only when an item is selected from the list and cleared with any other value?

Josh Anderson · Accepted Answer · 2010-08-11 13:38:27Z

32

Looks like I solved this pretty quickly on my own. Referring to the JQuery UI wiki, the ui item in the change event is the same one in the select event, so I can modify my code to read like this:

$(function() {
    $("#customerName").autocomplete({
        source: "/Customers/CustomerListJSON",
        minLength: 2,
        select: function(event, ui) {
            $("#customerOrganizationId").val(ui.item ? ui.item.Id : "");
        },
        change: function(event, ui) {
            $("#customerOrganizationId").val(ui.item ? ui.item.Id : "");
        }
    });
});

There's no need to test for the event, just for whether there is an item in the ui argument. The ID setting in the select event is probably redundant, but to be safe I'm going to keep both.

answered Aug 11, 2010 at 13:38

Josh Anderson

6,0052 gold badges38 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jigar Joshi Over a year ago

Cool! I have the same need but now I need multiple autocomplete, so for example if I select customer1 his id would be set in the hidden field now I type abcd now again I trigger the autocomplete and I select customer2 so his id should be pushed, now if I remove customer2 only his id should be removed from hidden list, any quick thoughts ?

Josh Anderson Over a year ago

It sounds like you're looking for something like the tagging tools. The autocomplete tool will do this, but it's not pretty. I prefer something like this: webspirited.com/tagit/#demos. There are a few controls like this out there...Tagit is just one I've used in the past with success.

Jigar Joshi Over a year ago

It helps but there should be content too, so if I use trigger string it should trigger the auto-complete not otherwise

john Smith Over a year ago

@Josh I'm facing a strange issue with that scenario. When the user type any letter I want that the change event will be fire , it actually fire but only when I open the rendered html using Firebug/chrome debugger. I'm mean If I'm not using the firebug -> the change event is not fire at all.I'm using the same code as yours. have any idea what I'm missing here?

Josh Anderson Over a year ago

No, sorry. That sounds like a browser issue. I'd suggest testing on another browser.

|

Andrea · Accepted Answer · 2013-10-08 09:00:50Z

0

$(function() {
$("#customerName").autocomplete({
    source: "/Customers/CustomerListJSON",
    minLength: 2,
    select: function(event, ui) {
        $("#customerId").val(ui.item ? ui.item.Id : "");
    },
    change: function(event, ui) {
        try {
            $("#trace").append(document.createTextNode(event.originalEvent.type + ", "));
            if (event.originalEvent.type != "menuselected")
                $("#customerId").val("");
        } catch (err) {
            $("#customerId").val("");
        }
    }
});
});

edited Oct 8, 2013 at 9:00

Andrea

12.5k17 gold badges71 silver badges76 bronze badges

answered Oct 8, 2013 at 8:36

Starbuks Cebu Hiking Trail

4573 silver badges13 bronze badges

Collectives™ on Stack Overflow

JQuery UI autocomplete change event - resetting selection ID

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related