У меня проблемы с попыткой автозаполнения работать должным образом.
Мне все кажется нормальным, но ....
<script>
$(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);
}
});
});
</script>
<div>
<input id="customer-search" />
</div>
@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/
источник
$("#selected-customer").val(ui.item.value);
label
вместоvalue
.focus
вместоselect
. Проблемаitem.value
ставится вместоitem.label
. В любом случае, чтобы обойти это?lookup.autocomplete({ source: data, focus: function(event, ui) { event.preventDefault(); $(this).val(ui.item.label) status.text(ui.item.value) submitted.text(ui.item.submitted) comments.html(ui.item.comments) } })
Просто хочу добавить, что вместо ссылки на элемент ввода по «id» внутри функций обратного вызова select и focus вы можете использовать этот селектор, например:
$(this).val(ui.item.label);
это полезно, когда вы назначаете автозаполнение для нескольких элементов, то есть по классу:
$(".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'); } } );
Я думаю, дело в том, что вы можете добавить любое дополнительное поле данных, кроме «метки» и «значения».
Я использую модальную загрузку, и это может быть так:
<div id="modal-form" class="modal fade" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div class="row"> </div> </div> </div> </div>
источник