JQuery Autocomplete: Submit Form on selection?

Question

Hi all,

I'm using JQuery Autocomplete on a traditional html form. I'm trying to get the form to submit (the old-fashioned way lol!) when a selection is made. Currently the input box gets filled out and I have to make a 2nd press of "return" or click the submit button.

I've tried a few examples from stackoverflow, but I could get it working :(

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