JQuery Autocomplete: отправить форму на выбор?

Question

Использование автозаполнения JQuery в традиционной HTML-форме.

Попытка отправить форму (старомодным способом) после выбора.

Но поле ввода заполняется и затемЯ должен нажать «возврат» во второй раз или нажать кнопку «Отправить».

Я попробовал несколько SO примеров, но не смог заставить их работать.

Как сделатьВы отправляете форму автоматически при выборе?

Answer 1

ОБНОВЛЕНИЕ: Я наконец понял это, код ниже должен сделать свое дело. По какой-то причине обратный вызов change не работал, но обратные вызовы close & select работают. Лучше использовать select, поскольку close также будет вызываться, если поле теряет фокус.

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

ДРУГОЕ ОБНОВЛЕНИЕ: Хорошо, есть также проблема с обратным вызовом select, который заключается в том, что по умолчанию (в коде выше), если вы проходите выпадающее меню автозаполнения с помощью клавиатуры, и выбираете с клавиша ввода, ввод изменяется до отправки формы. Однако, если вы выбираете ее с помощью мыши, форма передается непосредственно перед изменением ввода, поэтому отправленное значение - это то, что набрал пользователь (а не то, что она выбрала в раскрывающемся списке автозаполнения). Кажется, что работает woraround:

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

Answer 2

Я не смог прокомментировать ответ @handsofaten, поэтому я добавлю к его ответу здесь. Возможно, имеет смысл использовать значение вместо метка , поскольку в некоторых случаях, в моем случае, метка - это не то, с чем пользователь хотел бы выполнить поиск в базе данных.

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

Поле searchField уже заполнено выбранным полем, поэтому нет необходимости делать это снова в этой функции.

Официальная документация: http://docs.jquery.com/Plugins/Autocomplete/result#handler

Answer 4

Вы отправляете выбранный файл, вызывая идентификатор кнопки «Отправить» в этом поле, даже если код находится на другой странице.

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

Answer 5

  select: function( event, ui ) {

          if(ui.item){

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

    }

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

                  });