2010-02-04 2 views
27

Использование автозаполнения JQuery в традиционной HTML-форме.Автозаполнение JQuery: Подать заявку на выбор?

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

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

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

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

+0

в целом: определите функцию обратного вызова и отправьте форму в функции callback с помощью javascript. Не знаю, как это сделать в коде. – Natrium

ответ

42

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

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

ДРУГОЙ UPDATE: Хорошо, есть также проблема с select обратного вызова, которая является то, что по умолчанию (в приведенном выше коде), если пройти автозаполнения падение вниз с помощью клавиатуры, а затем выберите с ввода , вход будет изменен до отправки формы. Однако, если вы выберете его с помощью мыши, форма будет представлена ​​непосредственно перед изменением ввода, поэтому представленное значение - это то, что пользователь набрал (не то, что она выбрала из раскрывающегося списка автозаполнения). Woraround, что, кажется, работает это:

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

У меня есть противоположный эффект, когда auto complete отправляет мою форму, но я не хочу, чтобы он советовал? – Robert

6
$("#searchField").result(function(event, data, formatted) { 
    $(this).closest("form").submit(); 
}); 

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

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

5

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

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

      if(ui.item){ 

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

    } 

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

        }); 
+4

подумайте о том, чтобы дать объяснение вашему ответу – arghtype

0

Вы подадите выбранный, поданное вызова кнопки на Submit ID в этой области, даже если код на другой странице тоже.

Смежные вопросы