JQuery Autocomplete: Submit Form on selection?

Question

Using JQuery Autocomplete on a traditional HTML form.

Trying submit the form (the old-fashioned way) when a selection is made.

But the input box gets filled out and then I have to make press "return" a 2nd time, or click the submit button.

I've tried a few SO examples, but I could not get them to work.

How do you submit the form automatically when the selection is made?

Answer 1

UPDATE: I finally figured this one out, the code below should do the trick. For some reason the change callback was not working, but the close & select callbacks do. Using select is better, since close will also be called if the field loses focus.

$(function() {
    $("#searchField").autocomplete({
        source: "values.json",
        select: function(event, ui) { 
            $("#searchForm").submit(); }
    });
});

ANOTHER UPDATE: Ok, there's also a problem with the select callback, which is that by default (in the code above) if you traverse the autocomplete drop down with the keyboard, and select with the enter key, the input is changed before the form is submitted. However, if you select it with the mouse, the form is submitted just before the input is changed, so the value submitted is just what the user typed (not what she selected from the autocomplete dropdown). The woraround that seems to work is:

$("#searchField").autocomplete({
    source: "values.json",
    minLength: 2,
    select: function(event, ui) { 
        $("#searchField").val(ui.item.label);
        $("#searchForm").submit(); }
});

Answer 2

I couldn't comment on the answer by @handsofaten so I will add to his answer here. It may make more sense to use value rather than label as in some cases, my case, the label is not what the user would want to search the database with.

$("#searchField").autocomplete({
source: "values.json",
minLength: 2,
select: function(event, ui) { 
    $("#searchField").val(ui.item.value);
    $("#searchForm").submit(); }
});

Answer 3

$( "#searchField" ).result(function(event, data, formatted) {
  $(this).closest("form").submit();
});

The searchField is already populated with the selected field, so no need to do it in this function again.

Official documentation: http://docs.jquery.com/Plugins/Autocomplete/result#handler