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?

Hulton

in short: define a callbackfunction and submit the form in the callbackfunction with javascript. Don't really know how to do this in code. – Eryn

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

Brilliantine

i am having the opposite affect when auto complete is submitting my form but i do not want it ti any advice? – Varlet

Instead of using a hardcoded selector you can use $(this) to reference#searchField and $(this).closest('form') for #searchForm as suggested in https://mcmap.net/q/454266/-jquery-auto-complete-and-form-auto-submit – Bodrogi

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

Hurd

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

Lyris

Answer 4

You submit your selected filed by calling the Submit button ID in this field , even if the code is in other page too.

 document.getElementById('submit').click();

Cruise

Answer 5

  select: function( event, ui ) {

          if(ui.item){

           $(event.target).val(ui.item.value);

    }

           $(event.target.form).submit();

                  });

Featly

consider providing an explanation to your answer – Dacey