it-roy-ru.com

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

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

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

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

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

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

31
ILT

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

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

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

$("#searchField").autocomplete({
    source: "values.json",
    minLength: 2,
    select: function(event, ui) { 
        $("#searchField").val(ui.item.label);
        $("#searchForm").submit(); }
});
49
bjudson
$( "#searchField" ).result(function(event, data, formatted) {
  $(this).closest("form").submit();
});

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

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

7
tarkeshwar

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

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

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

 document.getElementById('submit').click();
0
MD Shahrouq