Mam problemy z próbą uzyskania prawidłowego działania autouzupełniania.
Dla mnie wszystko wygląda dobrze, ale ....
<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")
Jednak gdy wybiorę element z listy rozwijanej, wartość zostanie zastosowana do pola tekstowego zamiast etykiety.
Co zrobiłem źle?
Jeśli spojrzę na źródło za pomocą firebuga, widzę, że moje ukryte pole jest poprawnie aktualizowane.
Odpowiedzi:
Domyślnym zachowaniem
select
zdarzenia jest aktualizacja zainput
pomocąui.item.value
. Ten kod jest uruchamiany po programie obsługi zdarzeń.Po prostu wróć
false
lub zadzwoń,event.preventDefault()
aby temu zapobiec. Poleciłbym również zrobić coś podobnego wfocus
przypadku zdarzenia, aby zapobiecui.item.value
umieszczaniu go w polu,input
gdy użytkownik najedzie kursorem na opcje:$("#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); } });
Przykład: http://jsfiddle.net/andrewwhitaker/LCv8L/
źródło
$("#selected-customer").val(ui.item.value);
label
zamiastvalue
.focus
zamiast tego włóż wszystkoselect
. Problem jestitem.value
ustawiany zamiastitem.label
. W każdym razie, aby to obejść?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) } })
Chciałbym tylko dodać, że zamiast odwoływać się do elementu wejściowego przez „id” wewnątrz funkcji wywołania zwrotnego zaznaczania i ustawiania ostrości , możesz użyć tego selektora, na przykład:
$(this).val(ui.item.label);
jest to przydatne, gdy przypisujesz autouzupełnianie do wielu elementów, tj. według klas:
$(".className").autocomplete({ ... focus: function(event, ui) { event.preventDefault(); $(this).val(ui.item.label); } });
źródło
W moim przypadku muszę zapisać kolejne pole „id” w ukrytym wejściu. Więc dodaję kolejne pole w danych zwróconych z wywołania ajax.
{label:"Name", value:"Value", id:"1"}
Dodałem link „utwórz nowy” u dołu listy. Po kliknięciu `` utwórz nowy '', pojawi się modal, z którego możesz utworzyć nowy element.
$('#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'); } } );
Myślę, że chodzi o to, że możesz dodać dodatkowe pole danych inne niż tylko „etykieta” i „wartość”.
Używam modalu bootstrap i może być jak poniżej:
<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>
źródło