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

Andrew Whitaker · Accepted Answer · 2011-10-11 23:06:43Z

64

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.

edited Oct 11, 2011 at 23:06

answered Oct 11, 2011 at 22:59

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

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

1 Comment

Marshall Alsup Over a year ago

This answer is AWESOME. Very excellent explanation to something which was really killing me today. Thanks a lot for your contribution here Andrew!

Fery Kaszoni · Accepted Answer · 2014-04-21 15:40:02Z

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

answered Apr 21, 2014 at 15:40

Fery Kaszoni

4,0401 gold badge22 silver badges11 bronze badges

1 Comment

Dave Newton Over a year ago

Don't rely on timing when there's a real solution.

Collectives™ on Stack Overflow

jQuery Autocomplete: Event-select

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related