jQuery Autocomplete: Event-select

Question

I am trying to submit a form when an item is selected from the menu. I set class on the search form and I am using the event select for it which is found here: http://docs.jquery.com/UI/Autocomplete#event-select

Now, when you select an item using the keyboard (UP and Down), it works. But if you select an item using the mouse, it gives you the value which is previously typed.

Check this screenr: http://www.screenr.com/7T0s

This is what I use for submitting:

$("#searchform-input").autocomplete({
    select: function (a, b) {
        $(".searchform1").submit()
    }
});

Answer 1

This is because the select event's default behavior is executed after your event handler is finished running (so that you can cancel it if you so choose).

This means that when you click something, your form is submitted before the widget has a chance to populate the input properly.

You should be able to fix this by doing what the widget normally does for you:

$("#searchform-input").autocomplete({
    select: function (a, b) {
        $(this).val(b.item.value);
        $(".searchform1").submit()
    }
});

Now, what you may be wondering is yes, but why does it work when I use the keyboard?

This happens because the focus event actually populates the focused item in the input (look closely; you'll see the input populated as you move up and down the list). When you mouseover an item, the focus event is called, populating the input. When you select something using the enter key, the correct value happens to be in the input because of the focus event.

Answer 2

Hehe. Quite tricky this one, but incredibly simple to solve. Just delay the function 500 milliseconds, after the select event. It works perfectly. JOB DONE!! :)

$("#searchform-input").autocomplete({
select: function (a, b) {
    setTimeout(submit,500);
}});