Autouzupełnianie z zastosowaniem wartości nie etykiety do pola tekstowego

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.

Domyślnym zachowaniem selectzdarzenia jest aktualizacja za inputpomocą ui.item.value. Ten kod jest uruchamiany po programie obsługi zdarzeń.

Po prostu wróć falselub zadzwoń, event.preventDefault()aby temu zapobiec. Poleciłbym również zrobić coś podobnego w focusprzypadku zdarzenia, aby zapobiec ui.item.valueumieszczaniu go w polu, inputgdy 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/

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);
    }
});

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>