Автозаполнение, применяющее значение, не помеченное в текстовое поле

У меня возникают проблемы, пытаясь заставить автозаполнение работать правильно.

Все это выглядит нормально для меня, но …

 $(function () { $("#customer-search").autocomplete({ source: 'Customer/GetCustomerByName', minLength: 3, select: function (event, ui) { $("#customer-search").val(ui.item.label); $("#selected-customer").val(ui.item.label); } }); });  
@Html.Hidden("selected-customer")

Однако, когда я выбираю элемент из раскрывающегося списка, это значение применяется к текстовому поле вместо метки.

Что я сделал не так?

Если я посмотрю на источник, используя firebug, я вижу, что мое скрытое поле обновляется правильно.

Поведение по умолчанию для события select заключается в обновлении input с помощью ui.item.value . Этот код запускается после вашего обработчика событий.

Просто верните false или вызовите event.preventDefault() чтобы это не произошло. Я также рекомендовал бы сделать что-то подобное для события focus чтобы предотвратить ui.item.value во input поскольку пользователь наводит на выбор:

 $("#customer-search").autocomplete({ /* snip */ select: function(event, ui) { event.preventDefault(); $("#customer-search").val(ui.item.label); $("#selected-customer").val(ui.item.label); }, focus: function(event, ui) { event.preventDefault(); $("#customer-search").val(ui.item.label); } }); 

Пример: http://jsfiddle.net/andrewwhitaker/LCv8L/

Просто хотел бы добавить, что вместо ссылки на элемент ввода с помощью «id» внутри функций выбора и фокуса обратного вызова вы можете использовать этот селектор, например:

 $(this).val(ui.item.label); 

это полезно, когда вы назначаете автозаполнение для нескольких элементов, то есть по classу:

 $(".className").autocomplete({ ... focus: function(event, ui) { event.preventDefault(); $(this).val(ui.item.label); } }); 

В моем случае мне нужно записать другое поле «id» в скрытом входе. Поэтому я добавляю другое поле в данные, возвращаемые из вызова ajax.

 {label:"Name", value:"Value", id:"1"} 

И добавили ссылку «Создать новую» в нижней части списка. После нажатия кнопки «Создать новый» появится модальный текст, и вы сможете создать новый элемент.

 $('#vendorName').autocomplete ( { source: "/Vendors/Search", minLength: 2, response: function (event, ui) { ui.content.push ({ label: 'Add a new Name', value: 'Add a new Name' }); }, select: function (event, ui) { $('#vendorId').val(ui.item.id); }, open: function (event, ui) { var createNewVendor = function () { alert("Create new"); } $(".ui-autocomplete").find("a").last().attr('data-toggle', 'modal').addClass('highLight'); $(".ui-autocomplete").find("a").last().attr('href', '#modal-form').addClass('highLight'); } } ); 

Я думаю, что дело в том, что вы можете добавить любое дополнительное поле данных, отличное от «метки» и «значения».

Я использую bootstrap modal, и он может быть следующим:

  

  • Автозаполнение Angularjs от $ http
  • WPF: автозаполнение TextBox, ... снова
  • Автозаполнение jQuery и ASP.NET
  • Автоматическое открытие windows завершения в Eclipse
  • API автозаполнения Google Search?
  • Автозаполнение JComboBox
  • Давайте будем гением компьютера.