33

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?

Dave Jarvis
  • 30,436
  • 41
  • 178
  • 315
ILT
  • 341
  • 1
  • 3
  • 3
  • in short: define a callbackfunction and submit the form in the callbackfunction with javascript. Don't really know how to do this in code. – Natrium Feb 04 '10 at 09:43

5 Answers5

60

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(); }
});
bjudson
  • 4,073
  • 3
  • 29
  • 46
  • i am having the opposite affect when auto complete is submitting my form but i do not want it ti any advice? – Robert Aug 20 '16 at 17:12
  • 1
    Instead of using a hardcoded selector you can use `$(this)` to reference`#searchField` and `$(this).closest('form')` for `#searchForm` as suggested in https://stackoverflow.com/a/10650149/1538221 – slamora Feb 26 '19 at 08:48
10

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(); }
});
Crob
  • 599
  • 4
  • 26
7
$( "#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

tarkeshwar
  • 4,105
  • 4
  • 29
  • 35
0

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();
MD Shahrouq
  • 609
  • 8
  • 16
-3
  select: function( event, ui ) {

          if(ui.item){

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

    }

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

                  });
Vandana Rajput
  • 35
  • 4