Validating input with jQuery autocomplete plugin

Question

I'm using the standard autocomplete plugin here.

I have two text boxes on my form, item name and item id. The idea is that I want the user to search for the item by name, but on form submit I actually need the item id.

I am returning json from an ASP.NET MVC action which is used in the autocomplete.

The user starts typing an item name, the autocomplete list appears and is formatted to show the item name from the json object. The user can then click on a name from the list and the item id will be populated in the other textbox (which will actually be a hidden field once everything is working). I can then check that there is a value in this second textbox before submitting the form.

In the above scenario everything works great. But there are two huge bugs in what I've got so far:

1) The user has to actually click on the item in the list for the result function to fire. So if there is an item apples, and the user simply types apples directly into the textbox, the item id doesn't get populated.

2) The user could select apples from the list, which populates the item id. The user then changes his mind and goes back to the text box and types oranges. Again, if he doesn't actually click on the item in the list, the item id doesn't change and now when the form is submitted the wrong item id is submitted. Same thing if the user types something which isn't a valid selection, for example he changes the textbox to applesblahblahblah, the item id of apples is still going to be submitted even though a valid item choice wasn't made.

I've seen examples which suggest this can be solved by firing the search event, but I've tried that and it doesn't really seem to do much.

Does anyone know how to solve this problem?

My code so far is below, it's all pretty standard at the moment...

$('#ItemSearch').autocomplete("MyAction/FindItems", {
    dataType: 'json',
    parse: function(data) {
        var parsed = [];
        for (var i = 0; i < data.length; i++) {
            parsed[parsed.length] = {
                data: data[i],
                value: data[i].Value,
                result: data[i].Key
            };
        }
        return parsed;
    },
    formatItem: function(row) {
        return row.Value;
    }
}).result(function(event, data, formatted) {
    $(this).val(data.Value);
    $('#ItemId').val(data.Key);
}).blur(function() {
    // this is where I was trying to force an update of the item id textbox, 
    // but it doesn't work.
    $(this).search();
});

I'd be greatful for any pointers. Thanks

Edit: If there is a better autocomplete which handles json and forced validation I'd be happy to hear suggestions as it might be easier than trying to get this one to work.

Answer 1

A better autocomplete may be the jQuery UI autocomplete, which does require the jQuery UI (pretty big library), but is more flexible. It has plenty of events that you can use to force validation.